|
熟悉工作流程
在真正開始工作之前我們腦海中要形成這樣一種思想：表格是什么我不知道，在內(nèi)容部分我不能讓它再出現(xiàn)表現(xiàn)控制標(biāo)簽，如：font、color、height、width、align等標(biāo)簽不能再出現(xiàn)，（簡(jiǎn)單說工作前先洗腦，忘掉以前的一慣做法，去接受和使用全新的方法），我不是單純的用DIV來實(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來定義語義結(jié)構(gòu)；2.然后用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對(duì)齊屬性等；3.最后在這個(gè)CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等（沒有表現(xiàn)屬性的標(biāo)簽），下面大家跟我一起來做一個(gè)實(shí)例加深對(duì)這個(gè)步驟的理解。先看結(jié)果圖：
CSS排版結(jié)果圖
演示地址：css2.html
用div來定義語義結(jié)構(gòu)
現(xiàn)在我要給大家演示的是一個(gè)典型的版面分欄結(jié)構(gòu)，即頁頭、導(dǎo)航欄、內(nèi)容、版權(quán)（如下圖）
典型版面分欄結(jié)構(gòu)
其結(jié)構(gòu)代碼如下：
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
上面我們定義了四個(gè)盒子，按照我們想要的結(jié)果是，我們要讓這些盒子等寬，并從下到下整齊排列，然后在整個(gè)頁面中居中對(duì)齊，為了方便控制，我們?cè)侔堰@四個(gè)盒子裝進(jìn)一個(gè)更大的盒子，這個(gè)盒子就是BODY，這樣代碼就變成:
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時(shí)加上邊框，那么它的樣式是：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
頁頭為了簡(jiǎn)單起見，我們這里只要讓它整個(gè)區(qū)塊應(yīng)用一幅背景圖就行了,并在其下邊界設(shè)計(jì)定一定間隙，目的是讓頁頭的圖像不要和下面要做的導(dǎo)航欄連在一起，這樣也是為了美觀。其樣式代碼為：
#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ì)改變按鈕背景色和字體色，那么這些小小的按鈕我們又可以理解為小盒子，如此一來這是一個(gè)盒子嵌套問題了，樣式代碼如下：
#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)容看起來要和外層大盒子邊框有一定距離，這里用填充。內(nèi)容區(qū)塊樣式代碼為：
#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è)背景，與頁頭相映，里面文字要自動(dòng)居中對(duì)齊，有多行內(nèi)容時(shí)，行間距合適，這里的鏈接樣式也可以單獨(dú)指定，我這里就不做了。其樣式代碼如下：
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
最后回到樣式開頭大家會(huì)看到這樣的樣式代碼：
* {
margin: 0px;
padding: 0px;
}
這是用了通配符初始化各標(biāo)簽邊界和填充，（因?yàn)橛胁糠謽?biāo)簽?zāi)J(rèn)會(huì)有一定的邊界，如Form標(biāo)簽）那么接下來就不用對(duì)每個(gè)標(biāo)簽再加以這樣的控制，這可以在一定程度上簡(jiǎn)化代碼。最終完成全部樣式代碼是這樣的：
<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)代碼是這樣的：
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首 頁</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)物車</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>
好了，此文到此結(jié)束，更多內(nèi)容，如：CSS中的盒子寬度計(jì)算，瀏覽器兼容問題，XHTML規(guī)范化寫法等請(qǐng)大家去參考其它資料。如果覺得此文還可以，看過之后記得跟帖，你的鼓勵(lì)是我不斷出新文章的動(dòng)力^-^
本文完全為個(gè)人原創(chuàng)作品，轉(zhuǎn)摘請(qǐng)注明作者，作者：唐國(guó)輝。感謝經(jīng)典論壇網(wǎng)頁標(biāo)準(zhǔn)化專欄斑竹blankzheng指點(diǎn)優(yōu)化幾處
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2727499-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2007/4545.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 徹底弄懂CSS盒子模式 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 徹底弄懂CSS盒子模式 [2]
