您好,欢迎访问一九零五行业门户网

简单的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
其它类似信息

推荐信息