Web设计之网页布局CSS技巧

Web设计之网页布局CSS技巧

1、两列布局1.1、左列固定，右列自适应#left{ width:190px; float:left; }#right{ margin-left:205px; }1.2、右列固定，左列自适应#left{ float:left; width:100%; }#right{ float:left; margin-left:-100px; width:100px; }2、三列布局2.1、左右宽度固定，中间自适应#left{ float:left; width:200px; }#middle{ margin:0 210px; }#right{ float:right; width:200px; }2.2、中间宽度固定，左右自适应这个有点复杂，有必要先贴html<div class="wrap"> <div class="left"> <div class="leftWrap">left左列</div> </div> <div class="right"> <div class="rightWrap">right右列 http://www.cnblogs.com/sosoft/</div> </div> <div class="center">Center</div></div>css样式：.wrap{position:relative;overflow:hidden;width:100%}.left{float:left;width:50%;margin-left:-400px;padding-left:200px; }.leftWrap{margin-left:200px;background:#aaa;}.right{float:right;width:50%;margin-right:-400px;padding-right:200px;}.rightWrap{margin-right:200px;background:#aaa;}.center{position:absolute;left:50%;margin-left:-200px;width:400px;background:#eee;}3、上中下三行布局html { height:100%; }body { height:100%; }/*如需满屏，则对html和body都设置height:100%*/#top { position:absolute; left:10px;top:0px;right:10px;height:50px;}#main { position:absolute; left:10px;top:60px;bottom:60px;right:10px;overflow:auto;}#bottom { position:absolute; left:10px; bottom:0px; right:10px; height:50px;}xi/*IE6下*/#top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}#main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}#bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}