《网页设计cssdiv布局.doc》由会员分享，可在线阅读，更多相关《网页设计cssdiv布局.doc（3页珍藏版）》请在金锄头文库上搜索。
1、一列固定：#layout border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 300px;一列自适应：#layout border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 80%; 一列固定居中#layout border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 300px; margin:0px au
2、to;二列固定：#left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px;#right background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 200px;二列自适应：#left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 30
3、0px; width: 20%;#right background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 70%;二列左固定，右适应：#left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px;#right background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 300p
4、x;二列固定居中：#layout width: 404px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;#left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px;#right background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; widt
5、h: 200px;三列浮动，中间列自适应：原理，绝对位置：对页面中的每一个对象而言，默认position属性都是static。如果将对象设置为position:absolute，对象将脱离文档流，根据整个页面的位置进行重新定位。当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS：#layout position:absolute; top:20px; left:0px;#left background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px;
6、width: 200px; position: absolute; top: 0px; left: 0px;#right background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 200px; position: absolute; top: 0px; right: 0px;#center background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 202px; margin-left: 202px;
