CSS 常用布局

CSS 常用布局
作者:w3pop.com 翻译/整理:w3pop.com 发布:2007-05-10 浏览:319 ::  ::  三行(一列:内容)

1.宽度100%，自适应窗口宽度

#header
{ width:100%; background:#A94E38; color:#F0DFDB} 高度自动,宽度100% 提示：先去掉body的初始样式 *,html,body{margin:0;padding:0;}

#content
#content{ width:100%; background:#fff} 只是定义了宽度为100%,背景为白色与body色加以区分

#footer
#footer{ width:100%; background:#7082C2; color:#fff }

2.宽度100%，最小定宽780px

#header
{ width:100%; background:#A94E38; color:#F0DFDB} 高度自动,宽度100% 提示：先去掉body的初始样式 *,html,body{margin:0;padding:0;}

#content
#content{ width:100%; background:#fff} 只是定义了宽度为100%,背景为白色与body色加以区分 这个布局中我们使用了min-width:780px来限制最小宽度，对于IE浏览器我们则使用了js: width:expression(document.body.clientWidth*0.99<780?"780px":"100%"); 意思就是当文档的body在客户端显示宽度小于780px的时候就把width值固定为780px，当超过这个值就把width值设置为100%宽。

#footer
#footer{ width:100%; background:#7082C2; color:#fff }

3.  780px固定宽，居中
#header
{ width:780px; background:#A94E38; color:#F0DFDB} 高度自动,宽度780px 提示：先去掉body的初始样式,并将margin设置为0 auto便可实现居中 *,html,body{margin:0 auto;padding:0;}

#content
#content{ width:780px; background:#fff} 只是定义了宽度为780px,背景为白色与body色加以区分

#footer
#footer{ width:780px; background:#7082C2; color:#fff }

780px固定宽，靠左
780px固定宽，靠右
三行(两列:边栏+内容)
宽度100%，自适应窗口宽度(非float,伪框架)

宽度100%，自适应窗口宽度(float)
#header
#header{ width:100%; background:#A94E38; color:#F0DFDB;} 高度自动,宽度100% 提示：先去掉html的初始样式 *,html,body{margin:0;padding:0;}
#bar
#bar{width:30%; float:left; background:#eee }
左浮动,宽30%

#content
#content{ width:70%; float:left; background:#fff; }
跟在bar的后面左浮动，也可以设置为右浮动，在这里没有什么区别。

#footer{ background:#7082C2; width:100%; clear:both}
加个clear:both做保险，或者加个float

宽度100%，最小定宽780px
780px固定宽，居中
780px固定宽，靠左
780px固定宽，靠右
三行(三列:内容+2边栏)
100%宽，bar| content | bar
780px宽，bar| content | bar
内容处于两边栏下方(100%)
内容处于两边栏上方(100%)
其它常用布局
固定垂直边栏