常用PC排版佈局

此篇僅供個人新手學習使用，感謝各位作者大佬：
我熟知的三種三欄網頁寬度自適應布局方法
雙飛翼布局介紹-始于淘寶UED
CSS 布局十八般武藝都在這里了
CSS布局終極方案之--圣杯布局（兼容IE6+，現代瀏覽器）

查看測試

單列佈局1
  • 頭部、內容、底部，寬度一致，不自適應;

HTML

<div id="layout1">
      <div class="header">頭部</div>
      <div class="content">內容</div>
      <div class="footer">尾部</div>
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.header{
    height: 100px;
    background-color: #cccccc;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.footer{
    height: 100px;
    background-color: #cccccc;
}
#layout1{
    /*   width: 960px; *//*設置width當瀏覽器窗口寬度小于960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
}
單列佈局2
  • 頭部、底部寬度100%;
  • 內容寬度固定;

HTML

<div>
    <div class="header">頭部</div>
    <div id="layout2">
        <div class="content">內容</div>
    </div>
    <div class="footer">尾部</div>
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.header{
    height: 100px;
    background-color: #cccccc;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.footer{
    height: 100px;
    background-color: #cccccc;
}
#layout2{
    /*   width: 960px; *//*設置width當瀏覽器窗口寬度小于960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
}
三列佈局1
  • 左右側邊欄寬度固定，主內容欄寬度自適應;
  • float+margin;

需要注意：

  • 要先寫兩個側邊欄再寫內容，否則第二個側邊欄會被內容擠到下一行;

HTML

<div id="layout3">
    <div class="left">左側邊欄</div>
    <div class="right">右側邊欄</div>
    <div class="content">內容</div>
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.left{
    width: 100px;
    color: #fff;
    background-color: #00bcd4;
}
.right{
    width: 100px;
    color: #fff;
    background-color: #3CD49C;
}
#layout3 .left{
    float: left;
}
#layout3 .right{
    float: right;
}
#layout3 .content{
    margin-left: 100px;
    margin-right: 100px;
}
二列佈局1
  • 左/右側邊欄寬度固定，主內容欄寬度自適應，與三列一致，衹是去掉了一個側邊欄，然後內容不設置左或右的margin;
  • float+margin;

HTML

<div id="layout3">
    <div class="left">左側邊欄</div>
    <div class="content" style="margin-right:0;">內容</div>
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.left{
    width: 100px;
    color: #fff;
    background-color: #00bcd4;
}
.right{
    width: 100px;
    color: #fff;
    background-color: #3CD49C;
}
#layout3 .left{
    float: left;
}
#layout3 .right{
    float: right;
}
#layout3 .content{
    margin-left: 100px;
    margin-right: 100px;
}
三列佈局2
  • 左右側邊欄寬度固定 主內容欄寬度自適應;
  • float+margin;

需要注意：

  • 這裏div順序不是問題，打亂也不會改變佈局;
  • IE5情況下，layout4要清除浮動;

HTML

<div id="layout4">
    <div class="left">左側邊欄</div>
    <div class="content">內容</div>
    <div class="right">右側邊欄</div>   
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.left{
    width: 100px;
    color: #fff;
    background-color: #00bcd4;
}
.right{
    width: 100px;
    color: #fff;
    background-color: #3CD49C;
}
#layout4{
    position: relative;
    overflow: auto;
    zoom:1;
}
#layout4 .left{
    position:absolute;
    top:0;
    left: 0;
}
#layout4 .right{
    position:absolute;
    top:0;
    right: 0;
}
#layout4 .content{
    margin-left: 100px;
    margin-right: 100px;
    /*min-width: 600px;*//*當設置了最小寬度，或是內部元素含有一定的寬度，在瀏覽器窗口小到一定程度時將會與側邊欄重疊或是直接超出;*/
}
二列佈局2
  • 左/右側邊欄寬度固定，主內容欄寬度自適應，與三列一致，衹是去掉了一個側邊欄，然後內容不設置左或右的margin;
  • float+margin;

需要注意：

  • 這裏div順序不是問題，打亂也不會改變佈局;
  • IE5情況下，layout4要清除浮動;

HTML

<div id="layout4">
    <div class="left">左側邊欄</div>
    <div class="content" style="margin-right:0;">內容</div>
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.left{
    width: 100px;
    color: #fff;
    background-color: #00bcd4;
}
.right{
    width: 100px;
    color: #fff;
    background-color: #3CD49C;
}
#layout4{
    position: relative;
    overflow: auto;
    zoom:1;
}
#layout4 .left{
    position:absolute;
    top:0;
    left: 0;
}
#layout4 .right{
    position:absolute;
    top:0;
    right: 0;
}
#layout4 .content{
    margin-left: 100px;
    margin-right: 100px;
    /*min-width: 600px;*//*當設置了最小寬度，或是內部元素含有一定的寬度，在瀏覽器窗口小到一定程度時將會與側邊欄重疊或是直接超出;*/
}

經典三列佈局，也叫做聖杯佈局【Holy Grail of Layouts】，是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它在佈局要求有幾點：
1、三列佈局，中間寬度自適應，兩邊定寬;
2、中間欄要在瀏覽器中優先展示渲染;
3、允許任意列的高度最高;
4、要求衹用一個額外的DIV標簽;
5、要求用最簡單的CSS、最少的HACK語句;

聖杯佈局1

需要注意：

  • 順序不可亂，左右屬性其實是寫死的;
  • 窗口過小時佈局會錯亂;
  • 父級需要清除浮動;

HTML

<div id="layout5">         
    <div class="content">
        <p>大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容</p>
        內容</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.left{
    width: 100px;
    color: #fff;
    background-color: #00bcd4;
}
.right{
    width: 100px;
    color: #fff;
    background-color: #3CD49C;
}
#layout5{        
    padding: 0 230px 0 190px;
    overflow: auto;
    zoom:1; 
}
#layout5 .content{        
    float: left;       
    width: 100%;   
}  
#layout5 .left{       
    float: left;        
    width: 190px;
    height: 100px; 
    margin-left: -100%;               
    position: relative;  
    left: -190px;  
}   
#layout5 .right{        
    float: left;        
    width: 230px;
    height: 100px;       
    margin-left: -230px; 
    position: relative; 
    right: -230px;  
}
聖杯佈局2
  • 該方法先將整個主體向左縮進210px，該空間就是側邊欄的寬度；

需要注意：

  • 側邊欄內子集的寬度，超過側邊欄的寬度的話，將會拓展出來，不會影響佈局，但是影響美觀;
  • 主體有個padding-left，所以當瀏覽器窗口縮小到一定程度時，主體寬度是100%+padding-left的數值，這時候頭部和底部就會出現空白距離，并且會出現滾動條;
  • IE7模式下瀏覽器窗口縮小到635像素左右，有機氯將會排版錯亂，刷新后正常;

HTML

<div id="layout5">         
    <div class="content">
        <p>大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容</p>
        內容</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>

CSS

*{
    text-align: center;
    line-height: 100px;
}
body{
    margin: 0;
}
.header{
    height: 100px;
    background-color: #cccccc;
}
.content{
    min-height: 100px;
    color: #fff;
    background-color: #03A9F4;
}
.left{
    width: 100px;
    color: #fff;
    background-color: #00bcd4;
}
.right{
    width: 100px;
    color: #fff;
    background-color: #3CD49C;
}
.footer{
    height: 100px;
    background-color: #cccccc;
}
#layout6 .lc, #layout6 .cr, #layout6 .lcr, #layout6 .lrc , #layout6 .clr{
    margin: 10px 0;
    min-width: 400px;
}
#layout6 .content{
    float: left;
    width: 100%;
}
/* 左側邊欄固定寬度，內容自適應 */
#layout6 .lc{
    zoom: 1;
    overflow: hidden;
    padding-left: 210px;
}
#layout6 .lc .left{
    float: left;
    width: 200px;
    margin-left: -100%; /* = -100% */
    position: relative;
    left: -210px; /* 減去父級的padding-left */
}
/* 右側邊欄固定寬度，內容自適應 */
#layout6 .cr{
    zoom: 1;
    overflow: hidden;
    padding-right: 210px;
}
#layout6 .cr .right{
    float: left;
    width: 200px;
    margin-left: -200px; /* 數值為當前寬度 */
    position: relative;
    right: -210px; /* 減去父級的padding-right */
}
/* 左中右 內容自適應 */
#layout6 .lcr{
    zoom: 1;
    overflow: hidden;
    padding-left: 210px;
    padding-right: 210px;
}
#layout6 .lcr .left{
    float: left;
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -210px; /* 減去父級的padding-left */
}
#layout6 .lcr .right{
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    right: -210px; /* 減去父級的padding-right */
}
/* 左右側邊欄固定寬度，都在左邊 內容自適應 */
#layout6 .lrc{
    zoom: 1;
    overflow: hidden;
    padding-left: 420px;
}
#layout6 .lrc .left{
    float: left;
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -420px; /* 減去父級的padding-left */
}
#layout6 .lrc .right{
    float: left;
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -210px; /* 減去父級的padding-left */
}
/* 左右側邊欄固定寬度，都在右邊 內容自適應 */
#layout6 .clr{
    zoom: 1;
    overflow: hidden;
    padding-right: 420px;
}
#layout6 .clr .left{
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    right: -210px; /* 減去父級的padding-right */
}
#layout6 .clr .right{
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    right: -420px; /* 減去父級的padding-right */
}

來自於淘寶UED，可以看做是聖杯佈局的改良版

雙飛翼佈局1
  • 這個佈局與聖杯佈局原理差不多，衹是雙飛翼不需要position:relative這個屬性;

HTML

<div id="layout7">
    <!-- 順序不可調換 -->
    <div style="float: left;width: 100%;">         
        <div class="content">
            <p style="margin:0;">大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容大概是個內容</p>
            內容
        </div>
    </div>
    <div class="left">左邊</div>
    <div class="right">右邊</div> 
</div>

CSS

#layout7{
    overflow: auto;
    zoom:1;
}
#layout7 .left{
    float: left;
    width: 190px;
    margin-left: -100%;
}
#layout7 .right{
    float: left;
    width: 230px;
    margin-left: -230px;
}
#layout7 .content{
    margin: 0 230px 0 190px;/*在聖杯佈局中，這裏是padding*/
}

2017年4月1日 第一次整理

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 歷時兩天多，合計將近54小時的旅程完結。這三天兩夜的時間內，有不少見聞，值得一談。 我們是在2011年12月28日...
    逸仙無患閱讀 955評論 0贊 3
  • 【杯子技巧】 和對方的交情還屬於曖昧不清的階段，正確掌握和對方的距離感，是很困難的事。 最可怕的是，你覺得兩人的感...
    77733261dbff閱讀 679評論 0贊 0
  • 隨筆1-24（2015.6-10） 1、作者 才華不是財富，痛苦不是財富，用才華對痛苦進行思考和表達才是。於是有了...
    四葉閱讀 1,523評論 3贊 14
  • 很多人都問我，你真的每天都在跑步嗎？是的。短期目標，做足準備；長遠目標，做足儲備。這一直是我的主事風格。跑步真的利...
    joyjia閱讀 201評論 0贊 1
  • 這幾天由于各種亂七八糟的事沒有寫東西，本打算寫一篇散文的，現在又不得不寫一篇演講稿了。自己感覺寫的很差，也不想去...
    小七福閱讀 1,088評論 0贊 5