经典布局

一定要先清除默认样式，然后设置统一样式：

body，.....{margin:0;padding:0;}

 

1.上中下：每个div中设置相应布局

header#header

section#section

footer#footer

居中：

margin:0 auto;(上下为0，左右居中)

width:900px;

 

2.左右两栏式（一般左边为菜单栏，右边为内容）

思路：左右两部分要有共同的父级

效果：

2.1混合浮动+普通流

.wrap设置盒子的宽度....right下面不用自己设置宽度，则随盒子改变而改变。

 2.2纯浮动

 3.定位模式

 三 .左右两栏+页眉页脚

一定要先清除默认样式，然后设置统一样式：

body，.....{margin:0;padding:0;}

 

1.上中下：每个div中设置相应布局

header#header

section#section

footer#footer

居中：

margin:0 auto;(上下为0，左右居中)

width:900px;

 

2.左右两栏式（一般左边为菜单栏，右边为内容）

思路：左右两部分要有共同的父级

效果：

2.1混合浮动+普通流

.wrap设置盒子的宽度....right下面不用自己设置宽度，则随盒子改变而改变。

 2.2纯浮动

 3.定位模式

 三 .左右两栏+页眉页脚

四：左中右三栏

左右两栏固定，中间自适应（即，拉动的时候，左右宽度不变，中间自适应）

1.加共同父级

2.写三块内容

左右两边浮动，中间自适应（左右两边标签一定要放在中间的前面）

浮动元素脱离文档流，所以才要放前面。

五：左中右三栏之双飞翼

中间内容放最前面

 

六：左中右三栏加页眉页脚