列布局,包含以下几种形式:
1、一列固定宽度
2、一列固定宽度居中
3、一列自适应宽度
4、一列自适应宽度居中
5、一列二至多块布局
列布局,包含以下几种形式:
1、一列固定宽度
一列固定宽度!CSS代码及在IE中显示如下:
此处显示 id "layout" 的内容
2、一列固定宽度居中
和一列固定宽度相比,我们要解决的问题就是居中。用到css的外边距属性:margin
#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }
//margin的值为auto的时候可以达到这个功能。
3、一列自适应宽度
自适应宽度是相对于浏览器而言,盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时,它默认是相对于浏览器显示的。
4、一列自适应宽度居中
同样和固定宽度居中一样,我们只需要设置div的外边距为auto即可实现居中了。
body { margin:0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }
5、一列二至多块布局
一般的网站整体可以分为上中下结构,即:头部、中间主体、底部。那么我们可以用三个div块来划分,分别给它们起名为:头部(header)、主体(maincontent)、询问(footer)。
阅读(2009) | 评论(0) | 转发(0) |