CSS布局教程：DIV CSS三列式布局的實現(xiàn)方法_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　版權(quán)聲明：MB5U.com原創(chuàng)，未經(jīng)本站同意，嚴禁轉(zhuǎn)載！

　　今天在群里，有一位網(wǎng)友在用DIV CSS實現(xiàn)三列式布局的時候碰到了困難，向網(wǎng)友求助。這一類上部形象及導(dǎo)航，底部為版權(quán)，中間區(qū)域分為三列的布局方式越來越廣泛的應(yīng)用。17英寸的顯示器已經(jīng)成為主流，我們以800*600分辨率作為網(wǎng)頁的尺寸在某些時候已經(jīng)不合時宜了，越來越多的客戶及我們自身，要求我們制作的時候適應(yīng)1024*768分辨率。寬度增加了，我們的內(nèi)容區(qū)域劃分也產(chǎn)生了一些變化，因而三列式布局的應(yīng)用也越來越多了。我們今天來說說用DIV CSS三列式布局的實現(xiàn)方法。

　　首先我們構(gòu)勒一個草圖，理清一下思路。在實際操作中，你面對的可能不是草圖，而是美工設(shè)計人員所設(shè)計的網(wǎng)站效果圖，但大體上的結(jié)構(gòu)是相當(dāng)?shù)模覀兛聪旅娴膱D片：

　　這樣的結(jié)構(gòu)與兩列式的布局是非常類似的，區(qū)別就是多了一列。（好象是廢話，別扔臭雞蛋！）我們將頂部和底部設(shè)置為寬度1002px左右，并居中對齊，以適應(yīng)更大分辨率的需要。（現(xiàn)在1600*1200也算是正常分辨率之一吧）將中部的三列，即左側(cè)，主內(nèi)容區(qū)，右側(cè)。置于一個div容器中，并將此div設(shè)置為寬度1002px左右，并居中對齊。再將此容器內(nèi)的左側(cè)，主內(nèi)容區(qū)，右側(cè)分別設(shè)置寬度、應(yīng)用浮動，以達到我們想預(yù)想的CSS布局效果。看下面的圖片：

　　我們根據(jù)上面的圖片，整理出各個div的id以及他們的關(guān)系：

示例代碼 [m.dounai2.com]

　　頂部：header；
　　中部三列的容器：divall；
　　左側(cè)：sider_a；
　　主內(nèi)容區(qū)：main；
　　右側(cè)：sider_b；
　　底部：footer

他們的嵌套關(guān)系如下圖：

　　我們整理出HTML代碼：

示例代碼 [m.dounai2.com]

<div id="header">header</div>
<div id="divall">
<div id="sider_a">sider_a</div>
<div id="main">main</div>
<div id="sider_b">sider_b</div>
</div>
<div id="footer">footer</div>

　　我們開始編寫CSS進行布局：

示例代碼 [m.dounai2.com]

* {
margin:0;
padding:0;
font-size:1em;
}

　　整體局布聲明：消除邊距，設(shè)置文字大小。
　　假如不消除body的邊距，在IE等瀏覽器中，內(nèi)容不是從左上端的0 0開始的。

示例代碼 [m.dounai2.com]

#header {
width:1002px;
height:100px;
margin:0 auto;
background:#06f;
}
#divall {
width:1002px;
margin:0 auto;
background:#fff;
}
#footer {
width:1002px;
height:60px;
margin:0 auto;
background:#999;
}

　　頂部：寬度高度設(shè)置，水平居中對齊，背景色為#06f；
　　中部三列的容器：寬度設(shè)置，水平居中對齊，背景色為白色；
　　底部：寬度高度設(shè)置，水平居中對齊，背景色為#999。

示例代碼 [m.dounai2.com]

#sider_a {
width:220px;
float:left;
background:#f93;
}
#main {
width:580px;
float:left;
margin-left:6px;
background:#dceafc;
}
#sider_b {
width:190px;
float:right;
background:#ccc;
}

　　左側(cè)（sider_a）：寬度設(shè)置，向左浮動，背景色為#f93；
　　主內(nèi)容區(qū)（main）：寬度設(shè)置，向左浮動，左邊距為6px，背景色為#dceafc；
　　右側(cè)（sider_b）：寬度設(shè)置，向右浮動，背景色為#ccc；
　　為什么主內(nèi)容區(qū)左邊距為6px呢？我們是這樣計算的：
　　　　1002-220-580-190=12px
　　　　12/2=6px; 實現(xiàn)中間兩條空白分割線相等，均為6px。

　　寫到這里，我們布局應(yīng)該算是完成了，且慢，讓我們看看IE與FF這兩個讓我們抓狂的東東中，顯示效果是不是一樣。