欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS的三列式"圣杯布局"方案完全解析

OSChina   發(fā)布時間：2016-06-02 11:57:16   作者：山哥   我要評論
圣杯布局效果優(yōu)美且對瀏覽器兼容性要求非常低,是一種非常給力的三列式頁面布局方案,接下來就來看看對CSS的三列式"圣杯布局"方案完全解析:

圣杯布局源自 Matthew Levine 在06年的一篇文章，其DOM結(jié)構(gòu)如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="container">  
  2.     <div class="main"></div>  
  3.  <div class="sub"></div>  
  4.  <div class="extra"></div>  
  5. </div>  

流程解說
接下來，讓我們一步一步地實現(xiàn)圣杯布局；

1、 首先分別浮動main、sub、extra三列， 然后利用負外邊距把sub列和extra列定位到左右兩邊。這時的CSS代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .main {   
  2.  float: left;   
  3.  width: 100%;   
  4.  height: 300px;   
  5.  background-color: rgba(255, 0, 0, .5);   
  6. }   
  7. .sub {   
  8.  float: left;   
  9.  width: 200px;   
  10.  height: 300px;   
  11.  margin-left: -100%;   
  12.  background-color: rgba(0, 255, 0, .5);   
  13. }   
  14. .extra {   
  15.  float: left;   
  16.  width: 180px;   
  17.  height: 300px;   
  18.  margin-left: -180px;   
  19.  background-color: rgba(0, 0, 255, .5);   
  20. }  

2、 完成上步后，sub和extra列已經(jīng)到了正確的位置，但是sub和extra列卻覆蓋了main的兩邊，對于這個問題，圣杯布局的解決辦法是給容器container添加左、右內(nèi)邊距，從而讓main列定位到正確的位置。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .container {   
  2.  padding-left: 210px;   
  3.  padding-right: 190px;   
  4. }  

3、 完成第二步后又出現(xiàn)了新問題：sub、extra列也受到容器左右內(nèi)邊距的影響位置發(fā)生了移動。為了解決這個問題，圣杯布局使用相對定位使sub、extra列回到正確的位置。新添加代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .sub {   
  2.  position: relative;   
  3.  left: -210px;   
  4. }   
  5. .extra {   
  6.  position: relative;   
  7.  rightright: -190px;   
  8. }  

4、 當瀏覽器縮小到一定程度時，這個布局可能會被破壞，可以在body上添加min-width屬性解決。最終的圣杯布局CSS代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body {   
  2.  min-width: 600px; /* 2*sub + extra */  
  3. }   
  4. .container {   
  5.  padding-left: 210px;   
  6.  padding-right: 190px;   
  7. }   
  8. .main {   
  9.  float: left;   
  10.  width: 100%;   
  11.  height: 300px;   
  12.  background-color: rgba(255, 0, 0, .5);   
  13. }   
  14. .sub {   
  15.  position: relative;   
  16.  left: -210px;   
  17.  float: left;   
  18.  width: 200px;   
  19.  height: 300px;   
  20.  margin-left: -100%;   
  21.  background-color: rgba(0, 255, 0, .5);   
  22. }   
  23. .extra {   
  24.  position: relative;   
  25.  rightright: -190px;   
  26.  float: left;   
  27.  width: 180px;   
  28.  height: 300px;   
  29.  margin-left: -180px;   
  30.  background-color: rgba(0, 0, 255, .5);   
  31. }  

點擊查看在線demo

完整實例
效果如下：
201662115852310.png (900×465)

CSS 和 DOM 代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <meta charset="utf-8">   
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
  6.     <title>圣杯布局</title>   
  7.   
  8.     <style type="text/css">   
  9.     body {background-color: #ffffff; font-size:14px;}   
  10.     #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}   
  11.     .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
  12.     .main {background-color: #03a9f4; color:#ffffff;}   
  13.     .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}   
  14.     p {margin:0; padding:20px; text-align: center;}   
  15.        
  16.        
  17.     /* 左側(cè)欄固定寬度，右側(cè)自適應(yīng) */  
  18.     .bd-lft {   
  19.         zoom:1;   
  20.         overflow:hidden;   
  21.         padding-left:210px;   
  22.     }   
  23.     .bd-lft .aside {   
  24.         float:left;   
  25.         width:200px;   
  26.         margin-left:-100%; /*= -100%*/  
  27.   
  28.         position:relative;   
  29.         left:-210px; /* = -parantNode.paddingLeft */  
  30.         _left: 0; /*IE6 hack*/  
  31.     }   
  32.     .bd-lft .main {   
  33.         float:left;   
  34.         width:100%;   
  35.     }   
  36.   
  37.   
  38.     /* 右側(cè)欄固定寬度，左側(cè)自適應(yīng) */  
  39.     .bd-rgt {   
  40.         zoom:1;   
  41.         overflow:hidden;   
  42.         padding-right:210px;   
  43.     }   
  44.     .bd-rgt .aside {   
  45.         float:left;   
  46.         width:200px;   
  47.         margin-left:-200px; /* = -this.width */  
  48.   
  49.         position:relative;   
  50.         rightright:-210px; /* = -parantNode.paddingRight */  
  51.     }   
  52.     .bd-rgt .main {   
  53.         float:left;   
  54.         width:100%;   
  55.     }   
  56.   
  57.   
  58.     /* 左中右 三欄自適應(yīng) */  
  59.     .bd-3-lr {   
  60.         zoom:1;   
  61.         overflow:hidden;   
  62.         padding-left:210px;   
  63.         padding-right:210px;   
  64.     }   
  65.     .bd-3-lr .main {   
  66.         float:left;   
  67.         width:100%;   
  68.     }   
  69.     .bd-3-lr .aside-1 {   
  70.         float: left;   
  71.         width:200px;   
  72.         margin-left: -100%;   
  73.   
  74.         position:relative;   
  75.         left: -210px;   
  76.         _left: 210px; /*IE6 hack*/  
  77.     }   
  78.     .bd-3-lr .aside-2 {   
  79.         float: left;   
  80.         width:200px;   
  81.         margin-left: -200px;   
  82.   
  83.         position:relative;   
  84.         rightright: -210px;   
  85.     }   
  86.   
  87.     /* 都在左邊，右側(cè)自適應(yīng) */  
  88.     .bd-3-ll {   
  89.         zoom:1;   
  90.         overflow:hidden;   
  91.         padding-left:420px;   
  92.     }   
  93.     .bd-3-ll .main {   
  94.         float:left;   
  95.         width:100%;   
  96.     }   
  97.     .bd-3-ll .aside-1 {   
  98.         float: left;   
  99.         width:200px;   
  100.         margin-left: -100%;   
  101.   
  102.         position:relative;   
  103.         left: -420px;   
  104.         _left: 0px; /*IE6 hack*/  
  105.     }   
  106.     .bd-3-ll .aside-2 {   
  107.         float: left;   
  108.         width:200px;   
  109.         margin-left: -100%;   
  110.   
  111.         position:relative;   
  112.         left: -210px;   
  113.         _left: 210px; /*IE6 hack*/  
  114.     }   
  115.   
  116.     /* 都在右邊，左側(cè)自適應(yīng) */  
  117.     .bd-3-rr {   
  118.         zoom:1;   
  119.         overflow:hidden;   
  120.         padding-right:420px;   
  121.     }   
  122.     .bd-3-rr .main {   
  123.         float:left;   
  124.         width:100%;   
  125.     }   
  126.     .bd-3-rr .aside-1 {   
  127.         float: left;   
  128.         width:200px;   
  129.         margin-left: -200px;   
  130.   
  131.         position:relative;   
  132.         rightright: -210px;   
  133.     }   
  134.     .bd-3-rr .aside-2 {   
  135.         float: left;   
  136.         width:200px;   
  137.         margin-left: -200px;   
  138.   
  139.         position:relative;   
  140.         rightright: -420px;   
  141.     }   
  142.   
  143.   
  144.     </style>   
  145.   
  146. </head>   
  147. <body>   
  148.   
  149.     <div id="hd">頭部</div>   
  150.        
  151.     <div class="bd-lft">   
  152.         <div class="main">   
  153.             <p>主內(nèi)容欄自適應(yīng)寬度</p>   
  154.         </div>   
  155.   
  156.         <div class="aside">   
  157.             <p>側(cè)邊欄固定寬度</p>   
  158.         </div>   
  159.     </div>   
  160.   
  161.     <div class="bd-rgt">   
  162.         <div class="main">   
  163.             <p>主內(nèi)容欄自適應(yīng)寬度</p>   
  164.         </div>   
  165.   
  166.         <div class="aside">   
  167.             <p>側(cè)邊欄固定寬度</p>   
  168.         </div>   
  169.     </div>   
  170.   
  171.     <div class="bd-3-lr">   
  172.         <div class="main">   
  173.             <p>主內(nèi)容欄自適應(yīng)寬度</p>   
  174.         </div>   
  175.   
  176.         <div class="aside-1">   
  177.             <p>側(cè)邊欄1固定寬度</p>   
  178.         </div>   
  179.   
  180.         <div class="aside-2">   
  181.             <p>側(cè)邊欄2固定寬度</p>   
  182.         </div>   
  183.     </div>   
  184.   
  185.     <div class="bd-3-ll">   
  186.         <div class="main">   
  187.             <p>主內(nèi)容欄自適應(yīng)寬度</p>   
  188.         </div>   
  189.   
  190.         <div class="aside-1">   
  191.             <p>側(cè)邊欄1固定寬度</p>   
  192.         </div>   
  193.   
  194.         <div class="aside-2">   
  195.             <p>側(cè)邊欄2固定寬度</p>   
  196.         </div>   
  197.     </div>   
  198.   
  199.     <div class="bd-3-rr">   
  200.         <div class="main">   
  201.             <p>主內(nèi)容欄自適應(yīng)寬度</p>   
  202.         </div>   
  203.   
  204.         <div class="aside-1">   
  205.             <p>側(cè)邊欄1固定寬度</p>   
  206.         </div>   
  207.   
  208.         <div class="aside-2">   
  209.             <p>側(cè)邊欄2固定寬度</p>   
  210.         </div>   
  211.     </div>   
  212.        
  213.     <div id="ft">底部</div>   
  214.   
  215. </body>   
  216. </html>  

圣杯布局的優(yōu)點總結(jié)如下：
1.使主要內(nèi)容列先加載。
2.允許任何列是最高的。
3.沒有額外的div。
4.需要的hack很少。

相關(guān)文章

  • 淺談css雙飛翼布局和圣杯布局

    這篇文章主要介紹了淺談css雙飛翼布局和圣杯布局,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-18

  • CSS布局之圣杯布局與雙飛翼布局

    圣杯布局跟雙飛翼布局的實現(xiàn)，目的都是左右兩欄固定寬度，中間部分自適應(yīng)。接下來通過本文教程給大家介紹CSS布局之圣杯布局與雙飛翼布局，感興趣的朋友一起學(xué)習(xí)吧
    2016-02-29

  • 面試必問:圣杯布局和雙飛翼布局的區(qū)別

    圣杯布局和雙飛翼布局是前端工程師需要日常掌握的重要布局方式。圣杯布局和雙飛翼布局是很多大廠必考的內(nèi)容，本文就詳細介紹一下這兩個布局有什么區(qū)別，感興趣的可以了解一
    2021-05-13

最新評論