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

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

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

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

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

　　這樣的結(jié)構(gòu)與兩列式的布局是非常類似的，區(qū)別就是多了一列。（好象是廢話，別扔臭雞蛋�。┪覀儗㈨敳亢偷撞吭O置為寬度1002px左右，并居中對齊，以適應更大分辨率的需要。（現(xiàn)在1600*1200也算是正常分辨率之一吧）將中部的三列，即左側(cè)，主內(nèi)容區(qū)，右側(cè)。置于一個div容器中，并將此div設置為寬度1002px左右，并居中對齊。再將此容器內(nèi)的左側(cè)，主內(nèi)容區(qū)，右側(cè)分別設置寬度、應用浮動，以達到我們想預想的CSS布局效果�？聪旅娴膱D片：

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

示例代碼 [www.hl5o.cn]

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

他們的嵌套關系如下圖：

　　我們整理出HTML代碼：

示例代碼 [www.hl5o.cn]

<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進行布局：

示例代碼 [www.hl5o.cn]

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

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

示例代碼 [www.hl5o.cn]

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

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

示例代碼 [www.hl5o.cn]

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

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