网页设计cssdiv布局.doc

《网页设计cssdiv布局.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、一列固定：#layout{border:2pxsolid#A9C9E2;background-color:#E8F5FE;height:200px;width:300px;}一列自适应：#layout{border:2pxsolid#A9C9E2;background-color:#E8F5FE;height:200px;width:80%;}一列固定居中#layout{border:2pxsolid#A9C9E2;background-color:#E8F5FE;height:200px;width:300px;margin:0pxaut

2、o;}二列固定：#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300px;width:200px;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;float:left;height:300px;width:200px;}二列自适应：#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300p

3、x;width:20%;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;float:left;height:300px;width:70%;}二列左固定，右适应：#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300px;width:200px;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;height:300px;}

4、二列固定居中：#layout{width:404px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;}#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300px;width:200px;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;float:left;height:300px;width:2

5、00px;}三列浮动，中间列自适应：原理，绝对位置：对页面中的每一个对象而言，默认position属性都是static。如果将对象设置为position:absolute，对象将脱离文档流，根据整个页面的位置进行重新定位。当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS：#layout{position:absolute;top:20px;left:0px;}#left{background-color:#E8F5FE;border:1pxsolid#A9C9E

6、2;height:400px;width:200px;position:absolute;top:0px;left:0px;}#right{background-color:#FFE7F4;border:1pxsolid#F9B3D5;height:400px;width:200px;position:absolute;top:0px;right:0px;}#center{background-color:#F2FDDB;border:1pxsolid#A5CF3D;height:400px;margin-right:202px;margi

7、n-left:202px;}