相對於"雙飛冀佈局",聖杯佈局的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>下面我將程式碼中的內容逐條解釋給大家:
第一步: 創建DOM結構:
基本原則是:
1.頭中底三部分,其中中部區域是頁面主體,用三列佈局完成;
2.中間三列中,中間為顯示主體,必須放在前面,優先渲染,提升用戶體驗;
<!--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>
第二步: 將頁面頭部和尾部公共樣式寫出來[寫在當前文檔
.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; 將公共內容區變化較小,設定為固定寬度,方便內容填充;
(2)min-height:100% ; 設定最小高度以確保頁面佈局完整,自動使用父級度高60px;
(3)margin: auto; 公共內容區content也是一個區塊,將它在父級容器中居中,要使用margin;
(4)text-align:center; 內部文字水平居中;
(5)line-height: 60%; 內部單行文字垂直居中;
(6)background-color:#eee; 設定背景參考色,根據情況決定是否保留;
第三步: 設定中間主體容器的樣式:
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
詳解:
1.width: 600px;
設定三列佈局的父容器總寬度600px,為什麼是600像素,因為我的頁總寬度為1000px,左右二側寬度為200px,
所以中間部分為600px,這裡將容器總寬度設定為600px有二個作用:1,是給中間區塊繼承用,二是可以透過padding來擴展,
所以不必擔心600px,包不住三列內容;
2.margin: auto; 將父容器在當前視窗中居中顯示;
3.overflow: hidden; 因為後面的三列內容我要用到浮動,為了讓父容器包住子塊,不會出現高度塌陷,這裡要設定溢出隱藏;
4.padding: 0 200px;
該語句有二個作用:
(1)設定內邊距padding,可以讓目前容器左右二邊的寬度各擴大200px,即400px,此時容器總寬度為1000px;
(2)容器寬度擴展後的空間,實際上就是給後面的左右二列側邊欄預留的空間,否則左右二欄顯示不出來;
5.background-color: yellow; 設定背景參考色,用來查看目前三列佈局情況,最終會被刪除或改變;
第四步: 設定三列中的中間內容區
.main {
width: 100%;
min-height: 650px;
background-color: #6CF;
float:left;
}
詳解:
1.width: 100%; 中間寬度為100%,其實就是600px,佔據目前容器全部內容區空間(不包括padding的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,與容器中預留的padding寬度相同;
2.min-height: 650px; 寬度與中間列保持一致,當然你也可以不一致;
3.background-color: #fd6fcf; 背景參考色,根據情況決定最終是否保留;
4.float: left; 很重要,浮動起來脫離文檔流,因中間塊寬度為100% ,所以會被擠壓到下面;
5.margin-left: -100%; 將左列透過設定負外邊距方式移到父容器預留的左側padding中;
注意-100% ,等價於: -600px,因為目前父容器.container寬度就是600,設定負值,就是向反方向拉元素
但此時,左列會佔據了中間內容區的左邊的200px位置;
6.position: relative; 設定左列的元素定位方式為:相對定位,相對於原來的位置,仍在文檔流中.
7.left: -200px; 負值是向左移動,,將左列移到容器container的padding-left區內,注意,
如果沒有設定容器container的padding,你會看不到左列的.
##第六步: 設定右列的顯示樣式#
.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区域内
到此为止,圣杯布局完成~~
聪明的你,学会了吗?
以上是手把手教學經典聖杯三列佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！