Divcss頁面布局資料(很好很強(qiáng)大).

1、如果你想嘗試一下不用表格來排版網(wǎng)頁，而是用CSS來排版你的網(wǎng)頁，也就是常聽的用DIV來編排你的網(wǎng)頁結(jié)構(gòu)，又或者說你想學(xué)習(xí)網(wǎng)頁標(biāo)準(zhǔn)設(shè)計(jì)，再或者說你的上司要你改變傳統(tǒng)的 表格排版方式，提高企業(yè)競爭力，那么你一定要接觸到的一個知識點(diǎn)就是CSS的盒子模式，這就是DIV排版的核心所在，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版 網(wǎng)頁內(nèi)容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。因?yàn)橛眠@種方式排版的網(wǎng)頁代碼簡潔，更新方便，能兼容更多的瀏覽器， 比如PDA設(shè)備也能正常瀏覽，所以放棄自己之前鐘愛的表格排版也是值得的，更重要的是CSS排版網(wǎng)頁的優(yōu)勢遠(yuǎn)遠(yuǎn)不只這些，本

2、人在這里就不多說，自己可以去查找相關(guān)信息。理解 CSS 盒子模型什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容（content）、填充（padding）、邊框（border）、邊界（margin），CSS盒子模式都具 備這些屬性。DO O X模式 這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫?，日常生活?所見的盒子也具有這些屬性，所以叫它盒子模式。 那么內(nèi)容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同

3、時也為了方便取出嘛。在網(wǎng)頁設(shè)計(jì)上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會被 撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。 填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，該盒子與其它東西要保留多大距離。CSS盒子邊界就是用DIV+CSS設(shè)計(jì)思路是這樣的：1.用div來定義語義結(jié)構(gòu)；2.然后用CSS來美化網(wǎng)頁，如加 入背景、線條邊框、對齊屬性等；3.最后在這個CSS

4、定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等（沒有表現(xiàn)屬性的標(biāo)簽），下面大家跟我一起來做一個實(shí)例加深對這個步驟的理解。先看結(jié)果圖：1.用div來定義語義結(jié)構(gòu)頁頭導(dǎo)航欄內(nèi)容弋div id=wcontent版權(quán)udiv id=footer現(xiàn)在我要給大家演示的是一個典型的版面分欄結(jié)構(gòu)，即頁頭、導(dǎo)航欄、內(nèi)容、版權(quán)F圖），典型版面分欄結(jié)構(gòu)其結(jié)構(gòu)代碼如下：以下是引用片段：vdiv id=headervdiv id=navv/div上面我們定義了四個盒子，按照我們想要的結(jié)果是，我們要讓這些盒子等寬，下整齊排列，然后在整個頁面中居中對齊，為了方便控制，我們再把這四個盒子裝進(jìn)大的盒子，這個盒子就是BOD Y這樣代碼就變

5、成：以下是引用片段：vdiv id=headervdiv id=navvdiv id=contentvdiv id=footerv/body并從下到一個更最外邊的大盒子(裝著小盒子的大盒子)我們要讓它在頁面居中，并重定義其寬度為760像素，同時加上邊框，那么它的樣式是：以下是引用片段：body font-family:Arial, Helvetica, sans-serif;font-size:12px;margin:0px auto;height:auto;width:760px;border:1px solid#006633;頁頭為了簡單起見，我們這里只要讓它整個區(qū)塊應(yīng)用一幅背景圖就行了，

6、并在其下邊界設(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)航欄我做成像一個個小按鈕，鼠標(biāo)移上去會改變按鈕背景色和字體色，那么這些小小的按鈕我們又可以理解為小盒子，如此一來這是一個盒子嵌套問題了，樣式代碼如下：以下是引用片段：#nav height:25px;width:760px;font-s

7、ize:14px;list-style-type:none;#nav li float:left;#nav li acolor:#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:hoverbackground-color:#006633;color:#FFFFFF;內(nèi)容部分主要放入文章內(nèi)容，有標(biāo)題和段落，標(biāo)題加粗，為了規(guī)范化，我用H標(biāo)簽，段落要自

8、動實(shí)現(xiàn)首行縮進(jìn)2個字，同時所有內(nèi)容看起來要和外層大盒子邊框有一定距離，這里用填充。內(nèi)容區(qū)塊樣式代碼為：以下是引用片段：#content height:auto;width:740px;line-height:1.5em;padding:10px;#content p text-indent:2em;#content h5 font-size:16px;margin:10px;版權(quán)欄，給它加個背景，與頁頭相映，里面文字要自動居中對齊，有多行內(nèi)容時，行間 距合適，這里的鏈接樣式也可以單獨(dú)指定，我這里就不做了。其樣式代碼如下：以下是引用片段：#footer height:50px;width:740

9、px;line-height:2em;text-align:center;background-color:#009966;padding:10px;最后回到樣式開頭大家會看到這樣的樣式代碼:以下是引用片段:* margin:Opx;padding:Opx;這是用了通配符初始化各標(biāo)簽邊界和填充，（因?yàn)橛胁糠謽?biāo)簽?zāi)J(rèn)會有一定的邊界，如Form標(biāo)簽）那么接下來就不用對每個標(biāo)簽再加以這樣的控制，這可以在一定程度上簡化代碼。最終完成全部樣式代碼是這樣的：以下是引用片段：vstyle type=text/css結(jié)構(gòu)代碼是這樣的：以下是引用片段：vlixahref=# 首頁 v/livlixahref=# 文章 vlixahref=# 相冊 vlixahref=#Blogv/av/livlixahref=# 論壇 vlixahr