常用PC排版佈局

此篇僅供個(gè)人新手學(xué)習(xí)使用波丰，感謝各位作者大佬：
我熟知的三種三欄網(wǎng)頁(yè)寬度自適應(yīng)布局方法
 雙飛翼布局介紹-始于淘寶UED
CSS 布局十八般武藝都在這里了
 CSS布局終極方案之--圣杯布局（兼容IE6+市咽，現(xiàn)代瀏覽器）

查看測(cè)試

單列佈局1

頭部嘶卧、內(nèi)容、底部冗疮，寬度一致灾票，不自適應(yīng);

HTML

<div id="layout1">
      <div class="header">頭部</div>
      <div class="content">內(nèi)容</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; *//*設(shè)置width當(dāng)瀏覽器窗口寬度小于960px時(shí)此改，單列布局不會(huì)自適應(yīng)恤煞。*/
    max-width: 960px;
    margin: 0 auto;
}

單列佈局2

頭部屎勘、底部寬度100%;
內(nèi)容寬度固定;

HTML

<div>
    <div class="header">頭部</div>
    <div id="layout2">
        <div class="content">內(nèi)容</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; *//*設(shè)置width當(dāng)瀏覽器窗口寬度小于960px時(shí)，單列布局不會(huì)自適應(yīng)居扒。*/
    max-width: 960px;
    margin: 0 auto;
}

三列佈局1

左右側(cè)邊欄寬度固定概漱，主內(nèi)容欄寬度自適應(yīng);
float+margin;

需要注意：

要先寫兩個(gè)側(cè)邊欄再寫內(nèi)容，否則第二個(gè)側(cè)邊欄會(huì)被內(nèi)容擠到下一行;

HTML

<div id="layout3">
    <div class="left">左側(cè)邊欄</div>
    <div class="right">右側(cè)邊欄</div>
    <div class="content">內(nèi)容</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

左/右側(cè)邊欄寬度固定喜喂，主內(nèi)容欄寬度自適應(yīng)瓤摧，與三列一致，衹是去掉了一個(gè)側(cè)邊欄夜惭，然後內(nèi)容不設(shè)置左或右的margin;
float+margin;

HTML

<div id="layout3">
    <div class="left">左側(cè)邊欄</div>
    <div class="content" style="margin-right:0;">內(nèi)容</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

左右側(cè)邊欄寬度固定主內(nèi)容欄寬度自適應(yīng);
float+margin;

需要注意：

這裏div順序不是問(wèn)題姻灶，打亂也不會(huì)改變佈局;
IE5情況下，layout4要清除浮動(dòng);

HTML

<div id="layout4">
    <div class="left">左側(cè)邊欄</div>
    <div class="content">內(nèi)容</div>
    <div class="right">右側(cè)邊欄</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;*//*當(dāng)設(shè)置了最小寬度诈茧，或是內(nèi)部元素含有一定的寬度产喉，在瀏覽器窗口小到一定程度時(shí)將會(huì)與側(cè)邊欄重疊或是直接超出;*/
}

二列佈局2

左/右側(cè)邊欄寬度固定，主內(nèi)容欄寬度自適應(yīng)敢会，與三列一致曾沈，衹是去掉了一個(gè)側(cè)邊欄，然後內(nèi)容不設(shè)置左或右的margin;
float+margin;

需要注意：

這裏div順序不是問(wèn)題鸥昏，打亂也不會(huì)改變佈局;
IE5情況下塞俱，layout4要清除浮動(dòng);

HTML

<div id="layout4">
    <div class="left">左側(cè)邊欄</div>
    <div class="content" style="margin-right:0;">內(nèi)容</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;*//*當(dāng)設(shè)置了最小寬度，或是內(nèi)部元素含有一定的寬度吏垮，在瀏覽器窗口小到一定程度時(shí)將會(huì)與側(cè)邊欄重疊或是直接超出;*/
}

經(jīng)典三列佈局障涯，也叫做聖杯佈局【Holy Grail of Layouts】，是Kevin Cornell在2006年提出的一個(gè)佈局模型概念膳汪，在國(guó)內(nèi)最早是由淘寶UED的工程師傳播開來(lái)唯蝶，在中國(guó)也有叫法是雙飛翼佈局，它在佈局要求有幾點(diǎn)：
1遗嗽、三列佈局粘我，中間寬度自適應(yīng)，兩邊定寬;
2痹换、中間欄要在瀏覽器中優(yōu)先展示渲染;
3征字、允許任意列的高度最高;
4、要求衹用一個(gè)額外的DIV標(biāo)簽;
5娇豫、要求用最簡(jiǎn)單的CSS匙姜、最少的HACK語(yǔ)句;

聖杯佈局1

需要注意：

順序不可亂，左右屬性其實(shí)是寫死的;
窗口過(guò)小時(shí)佈局會(huì)錯(cuò)亂;
父級(jí)需要清除浮動(dòng);

HTML

<div id="layout5">         
    <div class="content">
        <p>大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容</p>
        內(nèi)容</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

該方法先將整個(gè)主體向左縮進(jìn)210px冯痢，該空間就是側(cè)邊欄的寬度氮昧；

需要注意：

側(cè)邊欄內(nèi)子集的寬度或详，超過(guò)側(cè)邊欄的寬度的話，將會(huì)拓展出來(lái)郭计，不會(huì)影響佈局，但是影響美觀;
主體有個(gè)padding-left椒振，所以當(dāng)瀏覽器窗口縮小到一定程度時(shí)昭伸，主體寬度是100%+padding-left的數(shù)值，這時(shí)候頭部和底部就會(huì)出現(xiàn)空白距離澎迎，并且會(huì)出現(xiàn)滾動(dòng)條;
IE7模式下瀏覽器窗口縮小到635像素左右庐杨，有機(jī)氯將會(huì)排版錯(cuò)亂，刷新后正常;

HTML

<div id="layout5">         
    <div class="content">
        <p>大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容</p>
        內(nèi)容</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%;
}
/* 左側(cè)邊欄固定寬度夹供，內(nèi)容自適應(yīng) */
#layout6 .lc{
    zoom: 1;
    overflow: hidden;
    padding-left: 210px;
}
#layout6 .lc .left{
    float: left;
    width: 200px;
    margin-left: -100%; /* = -100% */
    position: relative;
    left: -210px; /* 減去父級(jí)的padding-left */
}
/* 右側(cè)邊欄固定寬度灵份，內(nèi)容自適應(yīng) */
#layout6 .cr{
    zoom: 1;
    overflow: hidden;
    padding-right: 210px;
}
#layout6 .cr .right{
    float: left;
    width: 200px;
    margin-left: -200px; /* 數(shù)值為當(dāng)前寬度 */
    position: relative;
    right: -210px; /* 減去父級(jí)的padding-right */
}
/* 左中右 內(nèi)容自適應(yīng) */
#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; /* 減去父級(jí)的padding-left */
}
#layout6 .lcr .right{
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    right: -210px; /* 減去父級(jí)的padding-right */
}
/* 左右側(cè)邊欄固定寬度，都在左邊 內(nèi)容自適應(yīng) */
#layout6 .lrc{
    zoom: 1;
    overflow: hidden;
    padding-left: 420px;
}
#layout6 .lrc .left{
    float: left;
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -420px; /* 減去父級(jí)的padding-left */
}
#layout6 .lrc .right{
    float: left;
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -210px; /* 減去父級(jí)的padding-left */
}
/* 左右側(cè)邊欄固定寬度哮洽，都在右邊 內(nèi)容自適應(yīng) */
#layout6 .clr{
    zoom: 1;
    overflow: hidden;
    padding-right: 420px;
}
#layout6 .clr .left{
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    right: -210px; /* 減去父級(jí)的padding-right */
}
#layout6 .clr .right{
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    right: -420px; /* 減去父級(jí)的padding-right */
}

來(lái)自於淘寶UED填渠，可以看做是聖杯佈局的改良版

雙飛翼佈局1

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

HTML

<div id="layout7">
    <!-- 順序不可調(diào)換 -->
    <div style="float: left;width: 100%;">         
        <div class="content">
            <p style="margin:0;">大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容大概是個(gè)內(nèi)容</p>
            內(nèi)容
        </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日第一次整理

最后編輯于：2017.12.06 07:06:23

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末缀棍，一起剝皮案震驚了整個(gè)濱河市秘症，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌枪眉，老刑警劉巖，帶你破解...
沈念sama閱讀 219,039評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件再层，死亡現(xiàn)場(chǎng)離奇詭異贸铜，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)聂受，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,426評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門蒿秦，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人饺饭，你說(shuō)我怎么就攤上這事渤早。” “怎么了瘫俊？”我有些...
開封第一講書人閱讀 165,417評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵鹊杖，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我扛芽，道長(zhǎng)骂蓖，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,868評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任川尖，我火速辦了婚禮登下，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己被芳，他們只是感情好缰贝，可當(dāng)我...
茶點(diǎn)故事閱讀 67,892評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布。她就那樣靜靜地躺著畔濒，像睡著了一般剩晴。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上侵状，一...
開封第一講書人閱讀 51,692評(píng)論 1贊 305
城市分裂傳說(shuō)
那天赞弥，我揣著相機(jī)與錄音，去河邊找鬼趣兄。笑死绽左，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的艇潭。我是一名探鬼主播拼窥，決...
沈念sama閱讀 40,416評(píng)論 3贊 419
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蹋凝！你這毒婦竟也來(lái)了闯团？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,326評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤仙粱，失蹤者是張志新（化名）和其女友劉穎房交，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伐割，經(jīng)...
沈念sama閱讀 45,782評(píng)論 1贊 316
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡候味，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,957評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了隔心。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片白群。...
茶點(diǎn)故事閱讀 40,102評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖硬霍，靈堂內(nèi)的尸體忽然破棺而出帜慢，到底是詐尸還是另有隱情，我是刑警寧澤唯卖，帶...
沈念sama閱讀 35,790評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布粱玲，位于F島的核電站，受9級(jí)特大地震影響拜轨，放射性物質(zhì)發(fā)生泄漏抽减。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,442評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一橄碾、第九天我趴在偏房一處隱蔽的房頂上張望卵沉。院中可真熱鬧颠锉，春花似錦、人聲如沸史汗。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,996評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)停撞。三九已至眉枕，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間怜森，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,113評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工谤牡，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留副硅，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,332評(píng)論 3贊 373
代替公主和親
正文我出身青樓翅萤，卻偏偏與公主長(zhǎng)得像恐疲，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子套么，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,044評(píng)論 2贊 355

常用PC排版佈局

單列佈局1

單列佈局2

三列佈局1

二列佈局1

三列佈局2

二列佈局2

聖杯佈局1

聖杯佈局2

雙飛翼佈局1

推薦閱讀更多精彩內(nèi)容