「Shuangfeiji Layout」と比較して、聖杯レイアウトの DOM 構造はよりシンプルでエレガントです。最終的なレンダリング: 
以下は聖杯です。 レイアウトのコア コードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style>
.header, .footer {
width: 100%;
height: 60px;
background-color: #aaa;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color: #eee;
}
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
.main {
width: 100%;
min-height: 650px;
background-color: #66CCFF;
float:left;
}
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">header</div>
</div>
<div class="container">
<div class="main">主要内容区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>以下、コードの内容を 1 つずつ説明します。
最初のステップ: DOM を作成する構造:
基本原則は :
1. ヘッダー、中間、下部の 3 つの部分があります。中央の領域はページの本文であり、3 つの要素で完成します。列レイアウト;
2. 中央の 3 つの列のうち、中央はディスプレイの本体であり、ユーザー エクスペリエンスを向上させるために、前に配置して最初にレンダリングする必要があります。エクスペリエンス;
<!--1.头部:--> <div class="header"> <div class="content">header</div> </div> <!--2.中间主体:--> <div class="container"> <div class="main">主要内容区</div> <div class="left">左边</div> <div class="right">右边</div> </div> <!--3.底部:--> <div class="footer"> <div class="content">footer</div> </div>
ステップ 2: ページの先頭と末尾に共通のスタイルを書き出します [現在のドキュメントの
.header, .footer {
width: 100%;
height: 60px;
background-color: #aaa;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color: #eee;
}
詳細な説明:
1. まず、ヘッダーと下部の共通スタイルを設定します:
(1)width:100%; 幅はページの幅と同じです: 100%、自動的に拡張されます;
(2)height:60px; 高さを一時的に 60 ピクセルに設定しますが、足りない場合は調整できます;
(3)background-color: #aaa; 背景の基準色を設定します。必要に応じて保持します;
2 .ヘッダーと下部のコンテンツ領域のスタイルを設定します:
(1)width:1000px; コンテンツを読みやすくするために、パブリック コンテンツ領域を小さくし、固定幅に設定します。 fill;
(2)min-height:100% ; ページ レイアウトが完成するように最小の高さを設定し、親の高さ 60px を自動的に使用します;
(3)margin: auto;パブリック コンテンツ領域もブロックであり、親コンテナーの中央に配置し、マージンを使用します;
(4)text-align:center; 内部テキストは水平方向に中央揃えになります;
(5)line-height: 60%;内部の単一行テキストは垂直方向の中央に配置されます;
(6)background-color:#eee; 背景の基準色を設定し、状況に応じて維持するかどうかを決定します;
ステップ3: 中間ボディコンテナのスタイルを設定します:
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
詳細な説明:
1.width: 600px;
親コンテナの合計幅を設定します3カラムレイアウトを600pxに設定しました。なぜ600ピクセルなのかというと、私のページの幅の合計が1000pxで、左右の幅が200pxだからです。
つまり、中央部分は600pxです。合計を設定します。コンテナの幅を 600px にすることには 2 つの機能があります: 1. 中央のブロックでの継承に使用され、2. パディングによって拡張できます。 ;
2.margin: auto; 現在のウィンドウの親コンテナを中央に配置します;
3.overflow: hidden; 親コンテナがラップできるようにするために、次の 3 列にフローティング コンテンツを使用する必要があるためです。高さの崩壊が発生した場合、オーバーフローの非表示をここで設定する必要があります;
4.padding: 0 200px;
このステートメントには 2 つの機能があります:
(1) 内側のマージン パディングを設定します。現在のコンテナの左右の幅をそれぞれ200px、つまり400px拡張します このときコンテナの合計幅は1000pxになります;
(2) コンテナ幅の後のスペース展開されているのは実際にはサイドバーの左右の列用に予約されたスペースであり、それ以外の場合は左右の列を表示できません;
5.background-color: yellow; 現在の 3 列を表示するための背景の基準色を設定しますレイアウト (最終的には削除または変更されます);
4 番目のステップ: 3 つの列に中央のコンテンツ領域を設定します
.main {
width: 100%;
min-height: 650px;
background-color: #6CF;
float:left;
}
詳細な説明:
1.width: 100%; 中間の幅は 100%、実際には 600px で、現在のコンテナのコンテンツ領域スペース全体を占めます (パディングの 400px を除く);
2.min-height: 650px; 最小値を設定しますコンテンツが少ない場合でも、ページ全体の美しさやユーザー エクスペリエンスに影響を与えることなく、十分な高さを表示できるように高さを調整します。
3.background-color: #6cf; 基準の背景色を設定し、維持するかどうかを決定します。必要に応じて変更します;
4.float: left; 中央のブロックをドキュメント フローから浮かせて配置することが非常に重要です。すべてのコンテンツ領域、この時点で、左側と右側のブロックが自動的に埋められ、上に移動;
#
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}詳細説明: 1.width: 200px ; 左の列の幅は 200px で、コンテナに予約されているパディング幅と同じです; 2.min-height: 650px; 幅は中央の列と一致しますが、もちろん、不一致にすることもできます。
3.background-color: #fd6fcf; 背景の基準色、状況に応じて維持するかどうかを決定します;
4.float: left; 非常に重要ですが、これはドキュメント フローから浮いてしまいます。中央のブロックは 100% なので、下に圧縮されます;
5.margin-left: -100%; 負のマージンを設定して、左列を親コンテナによって予約された左パディングに移動します;
注 - 100% 、 -600px に相当します。親の container.container の現在の幅が 600 であるためです。負の値を設定すると、要素が逆方向にプルされることになります。
ただし、この時点では、左の列が 200px の位置を占めます。中央のコンテンツ領域の左側;
6.位置: 相対; 左列の要素の配置方法を次のように設定します: 相対配置、元の位置を基準にして、ドキュメント フロー内にあります。 .left: -200px; 負の値は左に移動,, 左列をコンテナコンテナのpadding-left領域に移動 注,
コンテナコンテナのパディングが設定されていない場合
#6 番目のステップ: 右の列の表示スタイルを設定します。
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
1.right: 200px; 宽度与左列相同,均为200px;
2.min-height: 650px; 最小高度与左列一致;
3.background-color: #fc0107; 设置参考背景色;
4.float: left; 设置左浮动,脱离文档流后,对它重新进行排列;
5.margin-left: -200px; 向反方向上移200px,其实就是与中间列并排显示;
6.position: relative; 设置相对定位
7.right: -200px; 将右列移动到容器的padding-right区域内
到此为止,圣杯布局完成~~
聪明的你,学会了吗?
以上が聖杯の古典的な 3 列レイアウトに関するステップバイステップのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
セッションを保存するためにデータベースを使用することの利点は何ですか？Apr 24, 2025 am 12:16 AMデータベースストレージセッションを使用することの主な利点には、持続性、スケーラビリティ、セキュリティが含まれます。 1。永続性：サーバーが再起動しても、セッションデータは変更されないままになります。 2。スケーラビリティ：分散システムに適用され、セッションデータが複数のサーバー間で同期されるようにします。 3。セキュリティ：データベースは、機密情報を保護するための暗号化されたストレージを提供します。
PHPでカスタムセッション処理をどのように実装しますか？Apr 24, 2025 am 12:16 AMPHPでのカスタムセッション処理の実装は、SessionHandlerInterfaceインターフェイスを実装することで実行できます。具体的な手順には、次のものが含まれます。1）CussentsessionHandlerなどのSessionHandlerInterfaceを実装するクラスの作成。 2）セッションデータのライフサイクルとストレージ方法を定義するためのインターフェイス（オープン、クローズ、読み取り、書き込み、破壊、GCなど）の書き換え方法。 3）PHPスクリプトでカスタムセッションプロセッサを登録し、セッションを開始します。これにより、データをMySQLやRedisなどのメディアに保存して、パフォーマンス、セキュリティ、スケーラビリティを改善できます。
セッションIDとは何ですか？Apr 24, 2025 am 12:13 AMSessionIDは、ユーザーセッションのステータスを追跡するためにWebアプリケーションで使用されるメカニズムです。 1.ユーザーとサーバー間の複数のインタラクション中にユーザーのID情報を維持するために使用されるランダムに生成された文字列です。 2。サーバーは、ユーザーの複数のリクエストでこれらの要求を識別および関連付けるのに役立つCookieまたはURLパラメーターを介してクライアントに生成および送信します。 3.生成は通常、ランダムアルゴリズムを使用して、一意性と予測不可能性を確保します。 4.実際の開発では、Redisなどのメモリ内データベースを使用してセッションデータを保存してパフォーマンスとセキュリティを改善できます。
ステートレス環境（APIなど）でセッションをどのように処理しますか？Apr 24, 2025 am 12:12 AMAPIなどのステートレス環境でのセッションの管理は、JWTまたはCookieを使用して達成できます。 1。JWTは、無国籍とスケーラビリティに適していますが、ビッグデータに関してはサイズが大きいです。 2.cookiesはより伝統的で実装が簡単ですが、セキュリティを確保するために慎重に構成する必要があります。
セッションに関連するクロスサイトスクリプティング（XSS）攻撃からどのように保護できますか？Apr 23, 2025 am 12:16 AMセッション関連のXSS攻撃からアプリケーションを保護するには、次の測定が必要です。1。セッションCookieを保護するためにHTTPonlyとセキュアフラグを設定します。 2。すべてのユーザー入力のエクスポートコード。 3.コンテンツセキュリティポリシー（CSP）を実装して、スクリプトソースを制限します。これらのポリシーを通じて、セッション関連のXSS攻撃を効果的に保護し、ユーザーデータを確保できます。
PHPセッションのパフォーマンスを最適化するにはどうすればよいですか？Apr 23, 2025 am 12:13 AMPHPセッションのパフォーマンスを最適化する方法は次のとおりです。1。遅延セッション開始、2。データベースを使用してセッションを保存します。これらの戦略は、高い並行性環境でのアプリケーションの効率を大幅に改善できます。
session.gc_maxlifetime構成設定とは何ですか？Apr 23, 2025 am 12:10 AMthesession.gc_maxlifettinginttinginphpdethinesthelifsessessiondata、setinseconds.1）it'sconfiguredinphp.iniorviaini_set（）。 2）AbalanceSneededToAvoidPerformanceIssues andunexpectedLogouts.3）php'sgarbagecollectionisisprobabilistic、影響を受けたBygc_probabi
PHPでセッション名をどのように構成しますか？Apr 23, 2025 am 12:08 AMPHPでは、session_name（）関数を使用してセッション名を構成できます。特定の手順は次のとおりです。1。session_name（）関数を使用して、session_name（ "my_session"）などのセッション名を設定します。 2。セッション名を設定した後、session_start（）を呼び出してセッションを開始します。セッション名の構成は、複数のアプリケーション間のセッションデータの競合を回避し、セキュリティを強化することができますが、セッション名の一意性、セキュリティ、長さ、設定タイミングに注意してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
メモ帳++7.3.1
使いやすく無料のコードエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
