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

　　我們看下面的圖片：

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

　　它們相對應的關系如下：

Example Source Code [www.mb5u.com] 頂部：header
左側：sidebar
右側：containe
底部：footer
主要區域：main

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

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

Example Source Code [www.mb5u.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.mb5u.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.mb5u.com] * {
margin:0;
padding:0;
}

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

Example Source Code [www.mb5u.com] #header {
width:776px;
height:100px;
margin:0 auto;
background:#06f;
}

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

Example Source Code [www.mb5u.com] #main {
width:776px;
margin:0 auto;
}

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

Example Source Code [www.mb5u.com] #main #sidebar {
width:200px;
float:left;
background:#f93;
}

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

Example Source Code [www.mb5u.com] #main #containe {
width:576px;
float:right;
background:#dceafc;
}

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

Example Source Code [www.mb5u.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.mb5u.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.mb5u.com] #clearfloat {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}

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

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

轉載于:https://www.cnblogs.com/gaoxuzhao/archive/2011/11/19/2255186.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。