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

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

2、版網(wǎng)頁的優(yōu)勢遠遠不只這些，本人在這里就不多說，自己可以去查找相關信息。理解理解 CSSCSS 盒子模型盒子模型什么是 CSS 的盒子模式呢？為什么叫它是盒子？先說說我們在網(wǎng)頁設計中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin),CSS 盒子模式都具備這些屬性。模式這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?箱子)上來理解， 日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西；而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部

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

4、邊框、對齊屬性等；3.最后在這個 CSS 定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等（沒有表現(xiàn)屬性的標簽），下面大家跟我一起來做一個實例加深對這個步驟的理解。先看結(jié)果圖：rir）,謨師腫聃幣陽通孑通ai*EaCITE叭誼些腿拗河d把Tf?強底忙E常如中泌孑譽子I上子惡.E1?生島中浙見疋盅于帕有住聖nfiU Ml許HE蠱十快砂卻厶內(nèi)寫毗豈于旦曲旳樂勺；囪萄無戟堤掃盅于躲差禾即 E 主 fl昨叭啊換沫或吾耳EPtJS的叩料：蛙恤經(jīng)亍案目F；主陽那切01期益亍鏑旳HT軸半ILi劃低一岳姜餌足E!舊嗟JBSJS間時出為了右耳恵出W*工網(wǎng)頁忑卜二.內(nèi)茗常抱立亍.HlfcRJ小鋅tDiv俺） .與現(xiàn)卒士汩中盒

5、子下同怡EJ!t沽11幀曲一舉半譽立十立子”皆WIU主1刪廟駒”MFRS二WJ刪二縣田射喬曲內(nèi)墳料立乎型3世玄把羈亦.WTtHTra匿屆也可以空Iff勺生卡二玄子里旳誰即皆-帀爛框百知、1蚯邑工 d 我；：一可U理iff為主煒中閉1仝孑的停敗驅(qū) T仝孑是號卄細蘭阱怔砌比那就長血子與JE它衣匹尺閔$丈毛宮-在曲牲活中把門士一T廣垢 4主不Ft劃灼8!吏雌于-毘1.用 div 來定義語義結(jié)構(gòu)CosrjT曲t?20U6-2COB3申CUDhuiAlRijiteRssEftsd貢頭貢頭“ivid=header,F導航欄導航欄 5 5 甘甘id=Mnav,內(nèi)容內(nèi)容udivid=t1content1,版權(quán)

6、版權(quán)現(xiàn)在我要給大家演示的是一個典型的版面分欄結(jié)構(gòu)，即頁頭、導航欄、內(nèi)容、版權(quán)（如下圖），典型版面分欄結(jié)構(gòu)其結(jié)構(gòu)代碼如下：以下是引用片段：以下是引用片段：divid=header/divdivid=navdivid=content/divdivid=footer/div上面我們定義了四個盒子，按照我們想要的結(jié)果是，我們要讓這些盒子等寬，并從下到下整齊排列，然后在整個頁面中居中對齊，為了方便控制，我們再把這四個盒子裝進一個更大的盒子，這個盒子就是 BODY，這樣代碼就變成：以下是引用片段：以下是引用片段：body最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760 像素

7、，同時加上邊框，那么它的樣式是：以下是引用片段：以下是引用片段：bodyfont-family:Arial,Helvetica,sans-serif;font-size:12px;margin:0pxauto;height:auto;width:760px;border:1pxsolid#006633;頁頭為了簡單起見，我們這里只要讓它整個區(qū)塊應用一幅背景圖就行了,并在其下邊界設計定一定間隙，目的是讓頁頭的圖像不要和下面要做的導航欄連在一起，這樣也是為了美觀。其樣式代碼為：以下是引用片段：以下是引用片段：#headerheight:lOOpx;width:760px;background-im

8、age:url(headPicgif);background-repeat:no-repeat;margin:0px0px3px0px;導航欄我做成像一個個小按鈕，鼠標移上去會改變按鈕背景色和字體色，那么這些小小的按鈕我們又可以理解為小盒子，如此一來這是一個盒子嵌套問題了，樣式代碼如下：以下是引用片段：以下是引用片段：#navheight:25px;width:760px;font-size:14px;list-style-type:none;#navlifloat:left;#navliacolor:#000000;text-decoration:none;padding-top:4px;d

9、isplay:block;width:97px;height:22px;text-align:center;background-color:#009966;margin-left:2px;#navlia:hoverbackground-color:#006633;color:#FFFFFF;內(nèi)容部分主要放入文章內(nèi)容，有標題和段落，標題加粗，為了規(guī)范化，我用 I 標簽，段落要自動實現(xiàn)首行縮進 2 個字,同時所有內(nèi)容看起來要和外層大盒子邊框有一定距離，這里用填充。內(nèi)容區(qū)塊樣式代碼為：以下是引用片段：以下是引用片段：#contentheight:auto;width:740px;line-heig

10、ht:1.5em;padding:10px;#contentptext-indent:2em;#contenth5font-size:16px;margin:10px;版權(quán)欄，給它加個背景，與頁頭相映，里面文字要自動居中對齊，有多行內(nèi)容時，行間距合適，這里的鏈接樣式也可以單獨指定，我這里就不做了。其樣式代碼如下：以下是引用片段：以下是引用片段：#footerheight:50px;width:740px;line-height:2em;text-align:center;background-color:#009966;padding:10px;最后回到樣式開頭大家會看到這樣的樣式代碼：以下是引用片段以下是引用片段: :*margin:Opx;padding:0px;這是用了通配符初始化各標簽邊界和填充，(因為有部分標簽默認會有一定的邊界，如Form 標簽)那么接下來就不用對每個標簽再加以這樣的控制， 這可以在一定程度上簡化代碼。最終完成全部樣式代碼是這樣的：以下是引用片段：以下是引用片段：styletype 二text/css/style結(jié)構(gòu)代碼是這樣的：以下是引用片段：/divulid=navliahref=#首頁/a/l