简单的CSS网页布局一二列布局_html/css_WEB-ITnose

1.一列布局

　　(一)一列自适应

　　自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简

head
        
middle
         
foot

　　(二)一列固定

　　顾名思义，固定布局的宽度，设置固定的PX值。

　　只需要在上面一列自适应的HTML代码中，把width:50% 修改成 width:960px即可，当然，各部分如果要求设置的宽度不同，在每个部分的类选择器上进行适当修改即可。

2.二列布局

　　(一)二列自适应

　　　二列的自适应，这时候要用到float属性。

　　

left
        
right

注意：以上百分比30%和70%加起来刚好是100%，宽度会充满整个浏览器页面，如果加起来没有100%，则他们中间会空出一栏的空间出来。

　　(二)二列居中自适应

　　在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为：80%；则子代标签的宽度会基于80%的浏览器宽度来定。

 1  2  3  4      5      6     34 35 36     
37         
left
38         
right
39     
40 41 

　　(三)二列居中固定

　　

 1  2  3  4      5      6     34 35 36     
37         
left
38         
right
39     
40 41