常用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日 第一次整理

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342

推荐阅读更多精彩内容

  • 有生之年無緣再見（舊京廣線塘角——梅山隧道段徒步記錄）
    歷時兩天多，合計將近54小時的旅程完結。這三天兩夜的時間內，有不少見聞，值得一談。 我們是在2011年12月28日...
    逸仙无患阅读 921评论 0赞 3
  • 无标题文章
    【杯子技巧】 和對方的交情還屬於曖昧不清的階段，正確掌握和對方的距離感，是很困難的事。 最可怕的是，你覺得兩人的感...
    77733261dbff阅读 641评论 0赞 0
  • 隨筆1-24
    隨筆1-24（2015.6-10） 1、作者 才華不是財富，痛苦不是財富，用才華對痛苦進行思考和表達才是。於是有了...
    四葉阅读 1,480评论 3赞 14
  • 随笔2015.8.7
    很多人都问我，你真的每天都在跑步吗？是的。短期目标，做足准备；长远目标，做足储备。这一直是我的主事风格。跑步真的利...
    joyjia阅读 194评论 0赞 1
  • 青春，梦想起航的地方
    这几天由于各种乱七八糟的事没有写东西，本打算写一篇散文的，现在又不得不写一篇演讲稿了。自己感觉写的很差，也不想去...
    小七福阅读 1,056评论 0赞 5