快捷導(dǎo)航

推薦徹底弄懂CSS盒子模式(DIV布局快速入門(mén))

更新時(shí)間：2007年03月18日 00:00:00 作者：

熟悉工作流程
　　在真正開(kāi)始工作之前我們腦海中要形成這樣一種思想：表格是什么我不知道，在內(nèi)容部分我不能讓它再出現(xiàn)表現(xiàn)控制標(biāo)簽，如：font、color、height、width、align等標(biāo)簽不能再出現(xiàn)，（簡(jiǎn)單說(shuō)工作前先洗腦，忘掉以前的一慣做法，去接受和使用全新的方法），我不是單純的用DIV來(lái)實(shí)現(xiàn)排版的嵌套，DIV是塊級(jí)元素，而像P也是塊級(jí)元素，例如要分出幾個(gè)文字內(nèi)容塊，不是一定要用DIV才叫DIV排版，不是“<div>文字塊一</div><div>文字塊二</div><div>文字塊三</div>”，而用“<p>文字塊一</p><p>文字塊二</p><p>文字塊三</p>”更合適。
　　用DIV+CSS設(shè)計(jì)思路是這樣的: 1.用div來(lái)定義語(yǔ)義結(jié)構(gòu)；2.然后用CSS來(lái)美化網(wǎng)頁(yè)，如加入背景、線條邊框、對(duì)齊屬性等；3.最后在這個(gè)CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等（沒(méi)有表現(xiàn)屬性的標(biāo)簽），下面大家跟我一起來(lái)做一個(gè)實(shí)例加深對(duì)這個(gè)步驟的理解。先看結(jié)果圖：

演示地址：http://www.hsptc.com/css2.html

CSS排版結(jié)果圖

用div來(lái)定義語(yǔ)義結(jié)構(gòu)
　　現(xiàn)在我要給大家演示的是一個(gè)典型的版面分欄結(jié)構(gòu)，即頁(yè)頭、導(dǎo)航欄、內(nèi)容、版權(quán)（如下圖），

典型版面分欄結(jié)構(gòu)

其結(jié)構(gòu)代碼如下：

復(fù)制代碼代碼如下:

<body>  
<div id="header"></div>  
<div id="nav"></div>  
<div id="content"></div>  
<div id="footer"></div>  
</body> 

　　最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁(yè)面居中，并重定義其寬度為760像素，同時(shí)加上邊框，那么它的樣式是：

復(fù)制代碼代碼如下:

body {  
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;  
margin: 0px auto;  
height: auto;  
width: 760px;  
border: 1px solid #006633;  
} 

　　頁(yè)頭為了簡(jiǎn)單起見(jiàn)，我們這里只要讓它整個(gè)區(qū)塊應(yīng)用一幅背景圖就行了,并在其下邊界設(shè)計(jì)定一定間隙，目的是讓頁(yè)頭的圖像不要和下面要做的導(dǎo)航欄連在一起，這樣也是為了美觀。其樣式代碼為：

復(fù)制代碼代碼如下:

#header {  
height: 100px;  
width: 760px;  
background-image: url(headPic.gif);  
background-repeat: no-repeat;  
margin:0px 0px 3px 0px;  
} 

　　導(dǎo)航欄我做成像一個(gè)個(gè)小按鈕，鼠標(biāo)移上去會(huì)改變按鈕背景色和字體色，那么這些小小的按鈕我們又可以理解為小盒子，如此一來(lái)這是一個(gè)盒子嵌套問(wèn)題了，樣式代碼如下：

復(fù)制代碼代碼如下:

#nav {  
height: 25px;  
width: 760px;  
font-size: 14px;  
list-style-type: none;  
}  
#nav li {  
float:left;  
}  
#nav li a{  
color:#000000;  
text-decoration:none;  
padding-top:4px;  
display:block;  
width:97px;  
height:22px;  
text-align:center;  
background-color: #009966;  
margin-left:2px;  
}  
#nav li a:hover{  
background-color:#006633;  
color:#FFFFFF;  
} 

　　內(nèi)容部分主要放入文章內(nèi)容，有標(biāo)題和段落，標(biāo)題加粗，為了規(guī)范化，我用H標(biāo)簽，段落要自動(dòng)實(shí)現(xiàn)首行縮進(jìn)2個(gè)字,同時(shí)所有內(nèi)容看起來(lái)要和外層大盒子邊框有一定距離，這里用填充。內(nèi)容區(qū)塊樣式代碼為：

復(fù)制代碼代碼如下:

#content {  
height:auto;  
width: 740px;  
line-height: 1.5em;  
padding: 10px;  
}  
#content p {  
text-indent: 2em;  
}  
#content h3 {  
font-size: 16px;  
margin: 10px; 

　　版權(quán)欄，給它加個(gè)背景，與頁(yè)頭相映，里面文字要自動(dòng)居中對(duì)齊，有多行內(nèi)容時(shí)，行間距合適，這里的鏈接樣式也可以單獨(dú)指定，我這里就不做了。其樣式代碼如下：

復(fù)制代碼代碼如下:

#footer {  
height: 50px;  
width: 740px;  
line-height: 2em;  
text-align: center;  
background-color: #009966;  
padding: 10px;  
} 

　　最后回到樣式開(kāi)頭大家會(huì)看到這樣的樣式代碼：

復(fù)制代碼代碼如下:

* {  
margin: 0px;  
padding: 0px;  
} 

　　這是用了通配符初始化各標(biāo)簽邊界和填充，（因?yàn)橛胁糠謽?biāo)簽?zāi)J(rèn)會(huì)有一定的邊界，如Form標(biāo)簽）那么接下來(lái)就不用對(duì)每個(gè)標(biāo)簽再加以這樣的控制，這可以在一定程度上簡(jiǎn)化代碼。最終完成全部樣式代碼是這樣的：

復(fù)制代碼代碼如下:

<style type="text/css">  
<!--  
* {  
margin: 0px;  
padding: 0px;  
}  
body {  
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;  
margin: 0px auto;  
height: auto;  
width: 760px;  
border: 1px solid #006633;  
}  
#header {  
height: 100px;  
width: 760px;  
background-image: url(headPic.gif);  
background-repeat: no-repeat;  
margin:0px 0px 3px 0px;  
}  
#nav {  
height: 25px;  
width: 760px;  
font-size: 14px;  
list-style-type: none;  
}  
#nav li {  
float:left;  
}  
#nav li a{  
color:#000000;  
text-decoration:none;  
padding-top:4px;  
display:block;  
width:97px;  
height:22px;  
text-align:center;  
background-color: #009966;  
margin-left:2px;  
}  
#nav li a:hover{  
background-color:#006633;  
color:#FFFFFF;  
}  
#content {  
height:auto;  
width: 740px;  
line-height: 1.5em;  
padding: 10px;  
}  
#content p {  
text-indent: 2em;  
}  
#content h3 {  
font-size: 16px;  
margin: 10px;  
}  
#footer {  
height: 50px;  
width: 740px;  
line-height: 2em;  
text-align: center;  
background-color: #009966;  
padding: 10px;  
}  
-->  
</style> 

結(jié)構(gòu)代碼是這樣的：

復(fù)制代碼代碼如下:

<body>  
<div id="header"></div>  
<ul id="nav">  
<li><a href="#">首 頁(yè)</a></li>  
<li><a href="#">文 章</a></li>  
<li><a href="#">相冊(cè)</a></li>  
<li><a href="#">Blog</a></li>  
<li><a href="#">論 壇</a></li>  
<li><a href="#">幫助</a></li>  
</ul>  
<div id="content">  
<h3>前言</h3>  
<p>第一段內(nèi)容</p>  
<h3>理解CSS盒子模式</h3>  
<p>第二段內(nèi)容</p>  
</div>  
<div id="footer">  
<p>關(guān)于華升 | 廣告服務(wù) | 華升招聘 | 客服中心 | Q Q留言 | 網(wǎng)站管理 | 會(huì)員登錄 | 購(gòu)物車(chē)</p><p>Copyright &copy;2006 - 2008 Tang Guohui. All Rights Reserved</p>  
</div>  
</body> 

　　好了，此文到此結(jié)束，更多內(nèi)容，如：CSS中的盒子寬度計(jì)算，瀏覽器兼容問(wèn)題，XHTML規(guī)范化寫(xiě)法等請(qǐng)大家去參考其它資料。如果覺(jué)得此文還可以，看過(guò)之后記得跟帖，你的鼓勵(lì)是我不斷出新文章的動(dòng)力^-^