Divcss頁(yè)面布局資料(很好很強(qiáng)大)_第1頁(yè)
Divcss頁(yè)面布局資料(很好很強(qiáng)大)_第2頁(yè)
Divcss頁(yè)面布局資料(很好很強(qiáng)大)_第3頁(yè)
Divcss頁(yè)面布局資料(很好很強(qiáng)大)_第4頁(yè)
Divcss頁(yè)面布局資料(很好很強(qiáng)大)_第5頁(yè)
已閱讀5頁(yè)，還剩3頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

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

3、取出嘛。在網(wǎng)頁(yè)設(shè)計(jì)上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會(huì)被撐壞的，而CSS盒子具有彈性，里面的東西大過(guò)盒子本身最多把它撐大，但它不會(huì)損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見(jiàn)盒子的厚度以及這個(gè)盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。用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)容，如文

4、字、圖片等（沒(méi)有表現(xiàn)屬性的標(biāo)簽），下面大家跟我一起來(lái)做一個(gè)實(shí)例加深對(duì)這個(gè)步驟的理解。先看結(jié)果圖：1. 用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)代碼如下：以下是引用片段：<div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id=&quo

5、t;footer"></div>上面我們定義了四個(gè)盒子，按照我們想要的結(jié)果是，我們要讓這些盒子等寬，并從下到下整齊排列，然后在整個(gè)頁(yè)面中居中對(duì)齊，為了方便控制，我們?cè)侔堰@四個(gè)盒子裝進(jìn)一個(gè)更大的盒子，這個(gè)盒子就是BODY，這樣代碼就變成:以下是引用片段：<body> <div id="header"></div> <div id="nav"></div> <div id="content"></div&

6、gt; <div id="footer"></div> </body>最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁(yè)面居中，并重定義其寬度為760像素，同時(shí)加上邊框，那么它的樣式是： 以下是引用片段：body  font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px auto; height: auto; width: 760px; border:&

7、#160;1px solid #006633; 頁(yè)頭為了簡(jiǎn)單起見(jiàn)，我們這里只要讓它整個(gè)區(qū)塊應(yīng)用一幅背景圖就行了,并在其下邊界設(shè)計(jì)定一定間隙，目的是讓頁(yè)頭的圖像不要和下面要做的導(dǎo)航欄連在一起，這樣也是為了美觀。其樣式代碼為：以下是引用片段：#header  height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; 導(dǎo)航欄

8、我做成像一個(gè)個(gè)小按鈕，鼠標(biāo)移上去會(huì)改變按鈕背景色和字體色，那么這些小小的按鈕我們又可以理解為小盒子，如此一來(lái)這是一個(gè)盒子嵌套問(wèn)題了，樣式代碼如下：以下是引用片段：#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;

9、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ū)塊樣式代碼為：以下是引用片段：#content  height:auto; width: 

10、740px; line-height: 1.5em; padding: 10px; #content p  text-indent: 2em; #content h5  font-size: 16px; margin: 10px;版權(quán)欄，給它加個(gè)背景，與頁(yè)頭相映，里面文字要自動(dòng)居中對(duì)齊，有多行內(nèi)容時(shí)，行間距合適，這里的鏈接樣式也可以單獨(dú)指定，我這里就不做了。其樣式代碼如下：以下是引用片段：#footer  height: 50px; width: 740px; line-he

11、ight: 2em; text-align: center; background-color: #009966; padding: 10px; 最后回到樣式開(kāi)頭大家會(huì)看到這樣的樣式代碼：以下是引用片段：*  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)化代碼。最終完成全部樣式代碼是這樣的：以下是引用片段：<style type="tex

12、t/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;

13、 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;

14、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: 

15、10px; #content p  text-indent: 2em; #content h5  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)代碼是這樣的：以下是引

16、用片段：<body> <div id="header"></div> <ul id="nav"> <li><a href="#">首 頁(yè)</a></li> <li><a href="#">文 章</a></li> <li><a href="#">相冊(cè)</a

17、></li> <li><a href="#">Blog</a></li> <li><a href="#">論 壇</a></li> <li><a href="#">幫助</a></li> </ul> <div id="content"> <h5>前言</h5> <p>第一段內(nèi)容</p> <h5>理解CSS盒子模式</h5> <p>第二段內(nèi)容</p> </div> <div id="footer"> <p>關(guān)于華升

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論