Div+Css教程模板無(wú)憂(yōu)>建站教程>Div+Css教程>DIV+CSS實(shí)例>

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

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

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

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

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

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

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

示例代碼 [www.wf0088.com]

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

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

　　我們整理出HTML代碼：

示例代碼 [www.wf0088.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>

　　我們開(kāi)始編寫(xiě)CSS進(jìn)行布局：

示例代碼 [www.wf0088.com]

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

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

示例代碼 [www.wf0088.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è)置，水平居中對(duì)齊，背景色為#06f；
　　中部三列的容器：寬度設(shè)置，水平居中對(duì)齊，背景色為白色；
　　底部：寬度高度設(shè)置，水平居中對(duì)齊，背景色為#999。

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

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