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

　　我們看下面的圖片：

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

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

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

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

　　思路已很清楚，我們開始整理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，通過浮動的設(shè)置，不管哪一個寫在代碼前部，所得到效果是一致的，我們可以通過讓內(nèi)容在前面的方式對搜索引擎更友好，如下代碼：

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；上下邊距為零，左右邊距為自動，實現(xiàn)了水平居中對齊；背景色為藍色#06f。

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

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

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；上下邊距為零，左右邊距為自動，實現(xiàn)了水平居中對齊；背景色為深灰色#666。

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

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

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

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/gaoxuzhao/archive/2011/11/19/2255186.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。