下面是聖杯布局的核心代碼:
<!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>
第二步: 將頁面頭部和尾部公用樣式寫出來[寫在當前文檔<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; }
詳解:
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地區內
到此為止,聖杯布局完成~~
聰明的你,學會了嗎?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
