為了相應網(wǎng)頁的標準化進程，最近開始學習div+css網(wǎng)頁布局了，感覺css確實不錯，現(xiàn)在發(fā)表出來，跟大家共享

一列固定寬度

<div id=”left” >一列固定寬度</div>

#left{

width:455px;

height:1000px;

background-color:#00FFFF;

border:1px solid #333333;

}

一列自適應

<div id=”left” >一列自適應</div>

#left{

width:80%;

height:1000px;

background-color:#00FFFF;

border:1px solid #333333;

}

一列寬度居中（auto讓瀏覽器自動判斷邊距，將當前div但左右邊距設為auto，瀏覽器會將div但左右邊距設為相同）

<div id=”left” >一列固定寬度</div>

#left{

width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333; margin：opx auto；

}

二列固定寬度

<div id=”left” >左列</div>

<div id=”right” >右列</div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333;

}

#right{float:left;width:400px;height:1000px;background-color:#000000;border:1px solid #FF0000;

}

二列寬度自適應（在算百分比時要考慮邊框大?。?/P>

<div id=”left” >左列</div>

<div id=”right” >右列</div>

#left {float:left;width:20%;height:1000px;background-color:#00FFFF;border:1px solid #333333; }

#right{float:left;width:70%;height:1000px;background-color:#000000;border:1px solid #FF0000;

}

兩列右列寬度自適應（左欄寬度為固定值，右欄寬度不設值且不浮動）

<div id=”left” >左列</div>

<div id=”right” >右列</div>

#left {float:left;width:455px;height:1000px;background-color:#00FFFF;border:1px solid #333333;

}

#right{height:1000px;background-color:#000000;border:1px solid #FF0000;

}

二列固定寬度居中（外層設左右邊距為auto,注意大盒子的固定寬度的算法）

<div id=”box”>

<div id=”left” >左列</div>

<div id=”right” >右列</div>

</div>

#box {margin:0px auto ;width:404px;

}

#left {float:left;width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333;

}

#right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000;

}

三列寬度自適應、浮動中間列（左右兩列絕對定位，中間邊距參照左右兩列）

<div id=”left” >左列</div>

<div id=”center” >中間</div>

<div id=”right” >右列</div>

#left {width:200px;height:1000px;background-color:#00FFFF;border:1px solid #333333; position:absolute;top:0px;left:0px;

}

#right{float:left;width:200px;height:1000px;background-color:#000000;border:1px solid #FF0000;position:absolute;top:0px;left:0px;

}

#center {height:1000px;background-color:#000000;border:1px solid #FF0000;margin-left:104px;maigin-right:104px;

}

高度自適應（對象高度是否百分比顯示，取決于其父級對象。瀏覽器默認情況下，body沒有高度屬性，直接設height:100%;時，不產(chǎn)生任何效果，但給body設定100%后，便發(fā)生作用了）

html,body{margin:opx;height:100%;

}

#left {float:left;width: 300px;height: 100%;background-color:#00FFFF;border:1px solid #333333;

}

更多信息請查看IT技術專欄