網頁佈局CSS技巧-Web設計必知

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右列</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;}

 

 

至於HTML程式碼，除了“2.2 中間寬度固定，左右自適應”，其他的我想沒有必要貼出來了。

有以上幾個作對照，常用的網站佈局應該都可以搞定。