经典布局方案

发表于 | 分类于 ， ， | 阅读次数:

值得反复推敲的经典布局方案

1.上中下一栏式

把页面分为上中下3块，上面是导航，中间是主要内容，下面是底部

1
2
3
4
5
6
7
8
9
10
<style>
body{margin:0;}
.wrap{width:900px; margin:0 auto;}
#header{height:100px;background:#6cf;}
#main{height:500px;background:#fcc;}
#footer{height:80px;background:#9cf;}
</style>
header#header.wrap
section#main.wrap
footer#footer.wrap

2.左右两栏式

一般左边是子菜单或菜单栏，右边是主要的内容部分
为了控制整体需要给两栏加一个共同的父级

a)混合浮动+普通流

1
2
3
4
5
6
7
8
<style>
.wrap{margin:0 auto;width:900px;}
#left{width:200px;height:500px;background:#cff;float:left;}
#right{height:500px;margin-left:200px;background:#fcc;}
</style>
div.wrap
    aside#left
    section#right

b)纯浮动式

1
2
3
4
5
6
7
8
<style>
.wrap{margin:0 auto;width:900px;overflow:hidden;}/*子级都浮动，父级需要清浮动*/
#left{width:200px;height:500px;background:#cff;float:left;}
#right{width:700px;height:500px;background:#fcc;float:left;}
</style>
div.wrap
    aside#left
    section#right

c)绝对定位方式

1
2
3
4
5
6
7
8
<style>
.wrap{margin:0 auto;width:900px;position:relative;}/*子级都浮动，父级需要清浮动 ||| 可以设置.wrap{width:80%;}宽度为百分比，使左边栏固定，右边栏自适应*/
#left{width:200px;height:500px;background:#cff;position:absolute;top:0;left:0;}
#right{width:700px;height:500px;background:#fcc;position:absolute;top:0;right:0;}
</style>
div.wrap
    aside#left
    section#right

3.左右两栏加页眉页脚

先写上下三栏，然后中间一栏再分为左右两栏，中间栏当成一个整体来处理

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.wrap{margin:0 auto;width:900px;}
#header{height:100px;background:#6cf;}
#main{height:500px;background:#fcc;}
#footer{height:80px;background:#9cf;}
#left{width:200px;height:100%;background:#cff;float:left;}
#right{width:700px;height:100%;background:#fcc;float:left;}
</style>
header#header.wrap
section#main.wrap
    aside#left
    section#right
footer#footer.wrap

4.左中右三栏

左右两栏固定，中间栏自适应
布局时一般有个原则：凡是遇到多栏式布局，一般情况下都要给它们加上一个共同的父级。

  • 圣杯布局
  • 双飞翼布局
  • 左右浮动，中间自适应

a)左右浮动，中间自适应

这种布局方式左右两边的标签一定要放在中间标签的前面
解释：因为前面两个元素都是浮动元素，浮动元素是不占用高度的(脱离文档流)，所以第三个元素可以到上面去，但是如果把中间的元素section放到上面的话，section会独占一行，写在section之后的浮动元素则不会和section在同一行，会掉到下一行去，所以section必须要放在最后写

1
2
3
4
5
6
7
8
9
10
<style>
.wrap{margin:0 auto;width:80%;} /* 设置宽度为百分比，使中间栏自适应 */
#left{width:200px;height:500px;background:#cff;float:left;}
#rigth{width:200px;height:500px;background:#cff;float:right;}
#main{height:500px;margin:0 210px;background:#fcc;}
</style>
div.wrap
    aside#left
    adise#right
    section#main

b)左中右三栏之双飞翼

来自淘宝UED团队
这种布局方式中间的主要内容section要放在最前面,section中还需要加入一个元素div.content，中间的主要内容

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.wrap{margin:0 auto;width:80%;} /* 设置宽度为百分比，使中间栏自适应 */
#main{width:100%;float:left; background:#fcc;}
#left{width:200px;float:left;height:500px;background:#cff;margin-left:-100%;}
#right{width:200px;float:left;height:500px;background:#cff;margin-left:-200px;}
.content{height:500px;margin:0 200px;}
</style>
div.wrap
    section#main
        div.content
    aside#left
    aside#right

5.左中右三栏加页眉页脚

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.wrap{margin:0 auto;width:900px;}
#header{height:100px;background:#6cf;}
#main{height:500px;background:#fcc;}
#footer{height:80px;background:#9cf;}
#middle{width:100%;float:left;} /* 浮动元素的宽度默认由内容来撑开，如果不设置宽度，middle的宽度只能由内容撑开，没有内容的时候宽度是0，所以这个地方必须要设置width:100%; */
#left{width:200px;height:100%;background:#cff;float:left;margin-left:-100%;}
#right{width:200px;height:100%;background:#cff;float:left;margin-left:-200px;}
.content{height:500px;margin:0 200px;}
</style>
header#header.wrap
section#main.wrap
    section#middle
        div.content
    aside#left
    aside#right
footer#footer.wrap

练习
DUX主题