聖杯の古典的な 3 列レイアウトに関するステップバイステップのチュートリアル
- 天蓬老师オリジナル
- 2018-08-18 13:55:152256ブラウズ
「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 サイトの他の関連記事を参照してください。