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;}