我們碰到過很多的企業(yè)網(wǎng)站或其它小型的展示類網(wǎng)站，有一些共同的特點(diǎn)，即頂部放一個大的導(dǎo)航或BANNER，右側(cè)是鏈接或圖片，左側(cè)放置內(nèi)容，頁面底部放置版權(quán)信息等。這樣的形式是國內(nèi)經(jīng)典式的布局，我們這里不對它的視覺效果作過多的討論，我們今天說說如何用DIV CSS實(shí)現(xiàn)三行兩列的布局。

　　我們看下面的圖片：


　　這樣的結(jié)構(gòu)大家再熟悉不過了，我們該如何用DIV CSS實(shí)現(xiàn)它呢。我們看下面的分析圖片：


　　它們相對應(yīng)的關(guān)系如下：


　　這個main是起什么作用的呢。由于中間的sidebar、containe是兩列并行的，我們需要設(shè)置浮動，讓他們各就各位。但我們的整個頁面是需要居中于瀏覽器窗口的。我們只能為他們設(shè)置一個容器main，讓sidebar、containe在這一容器中浮動。不必考慮居中問題。而main就發(fā)揮了居中或設(shè)置背景的功能。

　　思路已很清楚，我們開始整理HTML代碼：


　　header、main、footer是三個相對獨(dú)立的層，而sidebar、containe是main層的子層。這里有一點(diǎn)需要說明，我們可以先寫siderbar、也可以先寫containe，通過浮動的設(shè)置，不管哪一個寫在代碼前部，所得到效果是一致的，我們可以通過讓內(nèi)容在前面的方式對搜索引擎更友好，如下代碼：


　　我們開始寫CSS，對上面的各元素進(jìn)行樣式表定義：


　　整體布局聲明，邊距與填充均為零。


　　對header的定義：寬度為776px；高度為100px；上下邊距為零，左右邊距為自動，實(shí)現(xiàn)了水平居中對齊；背景色為藍(lán)色#06f。


　　對main的定義：寬度為776px；上下邊距為零，左右邊距為自動，實(shí)現(xiàn)了水平居中對齊；無背景色等其它設(shè)置。


　　對main的子層sidebar進(jìn)行定義：寬度為200px；向左浮動；背景色為桔紅色#f93。


　　對main的子層containe進(jìn)行定義：寬度為576px(776-200)；向右浮動；背景色為很淡的藍(lán)色#dceafc。


　　對footer的定義：寬度與上面的一樣為776px；高度為60px；上下邊距為零，左右邊距為自動，實(shí)現(xiàn)了水平居中對齊；背景色為深灰色#666。

　　或許你認(rèn)為我們對布局的CSS定義已經(jīng)結(jié)束了，其實(shí)還存在著問題，為了方便預(yù)覽，我們給sidebar、containe設(shè)置一個300px的高度，查看一下效果，如圖：


　　在IE中，一切正常，按預(yù)定的構(gòu)思正常顯示出來了，但在FF中，footer層消失了。這是因?yàn)镕F不知道浮動以后發(fā)生的事情，不清楚main的高度為幾何，因而它跑到上面去了，我們看不到它的存在。我們?nèi)コ齝ontaine的背景色，F(xiàn)F中看到的是如下圖的景象：


　　我們應(yīng)該在sidebar、containe結(jié)束的地方清除浮動，讓FF知道如何處理footer層，而不是直接放到上面，在視覺上消失。我們在HTML中增加一個新層，位于sidebar、containe結(jié)束的地方：


　　我們定義clearfloat的樣式為：


　　設(shè)置的意義是：clear:both;是指不答應(yīng)左右有浮動對象；高度為1px；溢出為隱藏；頂邊距為-1px，即這一層實(shí)際上是不可見的，僅為清除浮動之用。

　　好了，現(xiàn)在基本上沒有問題了，接下來就是在頁面中設(shè)置菜單、添加內(nèi)容并進(jìn)行相應(yīng)的樣式定義。關(guān)于這些知識我們在以后MB5U.com的文章中再一一向大家介紹。