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

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

CSS排版結(jié)果圖

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

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

其結(jié)構(gòu)代碼如下：
　　最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時加上邊框，那么它的樣式是：

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

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

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

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

　　最后回到樣式開頭大家會看到這樣的樣式代碼：

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


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

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

最新評論