DIV + CSS 實現最經典的佈局

我們遇到過很多的企業網站或其它小型的展示類網站，有一些共同的特點，即頂部放一個大的導航或BANNER，右側是鏈接或圖片，左側放置內容，頁面底部放置版權信息等。這樣的形式是國內經典式的佈局，我們這裏不對它的視覺效果作過多的討論，我們今天說說如何用DIV+CSS實現三行兩列的佈局。

　　我們看下面的圖片：

　　這樣的結構大家再熟悉不過了，我們該如何用DIV+CSS實現它呢。我們看下面的分析圖片：

　　它們相對應的關係如下：

Example Source Code [www.52css.com]

頂部：header
左側：sidebar
右側：containe
底部：footer
主要區域：main

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

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

Example Source Code [www.52css.com]

<div id="header"></div>
<div id="main">
    <div id="sidebar"></div>
    <div id="containe"></div>
</div>
<div id="footer"></div>

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

Example Source Code [www.52css.com]

<div id="header"></div>
<div id="main">
    <div id="containe"></div>
    <div id="sidebar"></div>
</div>
<div id="footer"></div>

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

Example Source Code [www.52css.com]

* {
    margin:0;
    padding:0;
}

　　整體佈局聲明，邊距與填充均爲零。

Example Source Code [www.52css.com]

#header {
    width:776px;
    height:100px;
    margin:0 auto;
    background:#06f;
}

　　對header的定義：寬度爲776px；高度爲100px；上下邊距爲零，左右邊距爲自動，實現了水平居中對齊；背景色爲藍色#06f。

Example Source Code [www.52css.com]

#main {
    width:776px;
    margin:0 auto;
}

　　對main的定義：寬度爲776px；上下邊距爲零，左右邊距爲自動，實現了水平居中對齊；無背景色等其它設置。

Example Source Code [www.52css.com]

#main #sidebar {
    width:200px;
    float:left;
    background:#f93;
}

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

Example Source Code [www.52css.com]

#main #containe {
    width:576px;
    float:right;
    background:#dceafc;
}

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

Example Source Code [www.52css.com]

#footer {
    width:776px;
    height:60px;
    margin:0 auto;
    background:#666;
}

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

　　或許你認爲我們對佈局的CSS定義已經結束了，其實還存在着問題，爲了方便預覽，我們給sidebar、containe設置一個300px的高度，查看一下效果，如圖：

　　在IE中，一切正常，按預定的構思正常顯示出來了，但在FF中，footer層消失了。這是因爲FF不知道浮動以後發生的事情，不清楚main的高度爲幾何，因而它跑到上面去了，我們看不到它的存在。我們去除containe的背景色，FF中看到的是如下圖的景象：

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

Example Source Code [www.52css.com]

<div id="header"></div>
<div id="main">
    <div id="sidebar"></div>
    <div id="containe"></div>
    <div id="clearfloat"></div>
</div>
<div id="footer"></div>

　　我們定義clearfloat的樣式爲：

Example Source Code [www.52css.com]

#clearfloat {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
}

　　設置的意義是：clear:both;是指不允許左右有浮動對象；高度爲1px；溢出爲隱藏；頂邊距爲-1px，即這一層實際上是不可見的，僅爲清除浮動之用。

　　好了，現在基本上沒有問題了，接下來就是在頁面中設置菜單、添加內容並進行相應的樣式定義。關於這些知識我們在以後52CSS.com的文章中再一一向大家介紹。