畢業(yè)設(shè)計(論文)-DIV CSS技術(shù)在WEB中的實際應用——專題的排版new

1、武 漢 大 學畢業(yè)設(shè)計（論文）說明書題 目 DIV+CSS技術(shù)在WEB中的實際應用專題的排版 專業(yè)班級 學 生 指導教師 總評成績 2011年 05 月 02 日武漢大學畢業(yè)設(shè)計（論文）任務(wù)書專業(yè)班級 學生 課題名稱DIV+CSS技術(shù)在WEB中的實際應用專題的排版課題條件在本次設(shè)計中采用的是WEB2.0技術(shù)，對設(shè)計后的網(wǎng)頁效果圖進行靜態(tài)頁面編寫，將網(wǎng)頁代碼與CSS代碼分離開。三、任務(wù)（含實驗、分析、計算、繪圖、論述等內(nèi)容）（1）對項目進行初步分析：頁面組成（2）對組成的頁面深入分析：頁面關(guān)系。（3）對構(gòu)成的頁面之間的異同點逐一編寫。（4）對頁面編寫CSS并同時實現(xiàn)樣式分離。四、設(shè)計（論文）說明

2、書內(nèi)容DIV+CSS是網(wǎng)站標準（或稱“WEB標準”）中常用術(shù)語之一，DIV只是HTML中的一個標簽，而CSS是一種語言，通常為了說明與HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式的區(qū)別，因為XHTML網(wǎng)站設(shè)計標準中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實現(xiàn)各種定位。XHTM是目前國際上倡導的網(wǎng)站標準設(shè)計語言，因為XHTML網(wǎng)站設(shè)計語言具有的基本特點，這種CSSDIV模式的網(wǎng)站設(shè)計具有一定的優(yōu)勢。本次設(shè)計將會將“符合W3C標準”作為設(shè)計原則，使設(shè)計出的頁面更加符合網(wǎng)頁設(shè)計規(guī)范，對搜索引擎更加友好，并且支持瀏覽器的向后兼容性。五、計劃進度 1、發(fā)題時間 2011 年 4 月 2

3、 日2011年4月2日開始編寫論文，當天完成進度為全文的10%。2011年4月6日跳過項目詳細設(shè)計，完成全文50%。2011年4月7日至2011年4月9日對項目詳細設(shè)計。完成全文85%。2011年4月10日完成剩余項目設(shè)計，對項目整體進行調(diào)試。2011年4月11日論文進入最后階段。對整個項目進行最后測試，測試結(jié)果良好，并對全文格式進行整合。于當夜完成。指導教師 教研室主任 年 月 日 年 月 日注：1、學生進行實踐教學環(huán)節(jié)前，指導教師應填寫好此任務(wù)書，經(jīng)教研室主任簽字后，正式給學生下任務(wù)。實踐教學環(huán)節(jié)結(jié)束后，應將此任務(wù)書放在設(shè)計（論文）說明書首頁裝訂。2、若實踐教學環(huán)節(jié)和任務(wù)書另行發(fā)了單行本，

4、則不填寫此任務(wù)書，實踐教學環(huán)節(jié)結(jié)束后，應將任務(wù)書單行本裝入資料袋。畢業(yè)設(shè)計（論文）評審表（指導教師用）評價內(nèi)容具體要求滿分得分調(diào)查論證能獨立查閱文獻和調(diào)研；能提出并論證課題的實施方案；有收集、加工各種信息及獲取新知識的能力10實驗方案設(shè)計與實驗技能能正確設(shè)計實驗方案，獨立進行實驗操作如裝置安裝，調(diào)試，操作15分析與解決問題的能力能運用所學知識和技能去實現(xiàn)與解決實際問題；能正確處理實驗數(shù)據(jù)；能對課題進行理論分析，得出有價值的結(jié)論20工作量、工作態(tài)度按期圓滿完成規(guī)定的任務(wù)，工作量飽滿，難度較大；工作努力，遵守紀律；工作作風嚴謹務(wù)實15質(zhì) 量綜合簡練完整，有見解；立論正確，論述充分，結(jié)論嚴謹，實驗正

5、確，分析處理科學；文字通順，技術(shù)用語準確，符號統(tǒng)一，編號齊全，書寫工整規(guī)范，圖表完整、整潔、正確；論文結(jié)果有應用價值20外語、計算機應用能力能正確翻譯外文資料；能正確撰寫中英文摘要，用計算機計算、繪圖和打印文稿10創(chuàng) 新工作中有創(chuàng)新意識；對前人工作有改進或突破，或有獨到見解10總 分評閱意見 指導教師簽名 日 期 武漢大學畢業(yè)設(shè)計（論文）答辯小組意見書專業(yè)班級 學生姓名 題目 DIV+CSS技術(shù)在WEB中的發(fā)展與應用 答辯記錄記錄人 地點 年 月 日答辯小組意見意見：得分：答辯組長 組員 年 月 日總評畢業(yè)設(shè)計（論文）得分*60%+畢業(yè)答辯得分*40% 總評成績 總評成績 目 錄第一章 符合W

6、EB標準71.1 早期常用的WEB標準方法71.2 新的WEB標準7第二章 分析頁面計算“房子”的大小和數(shù)量92.1 分析頁面?zhèn)€數(shù)92.2 頁面構(gòu)造分析10 專題首頁10 專題列表頁11 專題內(nèi)容頁12第三章 搭建模型給他們安排足夠合適的“房間”133.1 畫出簡圖133.1 用div把他們的房子搭建起來14 基本構(gòu)成通用的“房間”14 首頁div構(gòu)成15 列表頁div構(gòu)成16 內(nèi)容頁d

7、iv構(gòu)成18第四章 設(shè)計樣式讓“房子”看起來更漂亮204.1 樣式表簡介20 什么是CSS20 CSS的作用20 將樣式表加入HTML中204.2 給頁面添加樣式21 相同板塊用同樣的樣式21 首頁的樣式22 列表頁的樣式24 內(nèi)容頁的樣式26總 結(jié)28致 謝29參考文獻30第一章 符合WEB標準1.1 早期常用的WEB標準方法早期常用的網(wǎng)頁布局，通常采用下面四種方法圖1-1早期網(wǎng)頁布局

8、這些布局的方法在很長時間以來，都是較為流行的網(wǎng)頁布局模式，或是其中的一種，或是以上四種方法混合使用，隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展和許多新的上網(wǎng)設(shè)備的出現(xiàn)，使得這些網(wǎng)頁布局方式越來越不能適應新的要求。新的WEB標準在國內(nèi)逐漸普及，一種基于DIV+CSS的新型網(wǎng)頁布局方式開始流行，一些大型門戶網(wǎng)站都已經(jīng)完成了網(wǎng)站的重建，都是使用DIV+CSS的布局方式。1.2 新的WEB標準WEB標準是一系列標準的集合，在WEB標準中，把網(wǎng)頁分成4個部分：內(nèi)容 Content 、結(jié)構(gòu) Structure 、表現(xiàn) Presentation 和行為 Behavior ?！皟?nèi)容”就是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或

9、者圖片等。注意這里強調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。比如一些輔助的信息，像導航菜單、裝飾性圖片等?！敖Y(jié)構(gòu)”就是把混亂的內(nèi)容進行結(jié)構(gòu)化，比如加上標題、作者、章、節(jié)、段落和列表，這些就稱為“結(jié)構(gòu)”。結(jié)構(gòu)使內(nèi)容更加具有邏輯性，易用性。雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來的樣式?jīng)]有改變，例如字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內(nèi)容外觀的東西，稱之為“表現(xiàn)”?！靶袨椤本褪菍?nèi)容的交互及操作，例如，使用JS判斷一些表單提交，或者實現(xiàn)菜單的顯示和隱藏等。HTML和XHTML頁面都是由“內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為”這4個方面組成的?！皟?nèi)容”是基礎(chǔ)，然后是附加上去的“結(jié)構(gòu)”和“

10、表現(xiàn)”，最后再對他們加上“行為”。針對“結(jié)構(gòu)、表現(xiàn)和行為”這三個部分，W3C組織制定了大部分的標準。第二章 分析頁面計算“房子”的大小和數(shù)量對WEB標準有了初步的認識之后，我現(xiàn)在將制作一個交友網(wǎng)站的“成功故事”專題系列。交友網(wǎng)站的“成功故事”主要是用于交友網(wǎng)中的會員敘述他們在該網(wǎng)站的成功交友案例。2.1 分析頁面?zhèn)€數(shù)成功故事類似于新聞發(fā)布系統(tǒng)，即可以由會員在后臺自行添加他自己的成功故事，然后在前臺頁面中表現(xiàn)出來。后臺制作頁面主要是程序員多年經(jīng)驗后集成的一些通用頁面，我就不加以制作，我主要制作前臺展示給所有網(wǎng)站瀏覽者的前臺頁面。對于新網(wǎng)發(fā)布系統(tǒng)的前臺頁面，主要是由三個頁面構(gòu)成：（1）專題首頁：用

11、于展示特別受歡迎的成功匹配新人，以及是最新成功的新人案例、成功的新人的婚紗照。（2）專題的列表頁：用于展示所有發(fā)布過的新人成功案例，使用上一頁下一頁可以翻頁逐一瀏覽。（3）專題的內(nèi)容展示頁：用于展示某一個新人的成功案例，可以添加多張新人圖片，新人的認識過程，戀愛過程所有想說的話都可以發(fā)表。三個頁面的主要作用和包含內(nèi)容已經(jīng)有了大概的面貌，那么三個頁面之間的關(guān)系是如何的呢？由上面的敘述可以知道，這三個頁面是父- 子- 孫的關(guān)系，首頁是父頁面，用于展示主要的東西；列表頁是子頁面，用于展示所有的案例；內(nèi)容頁是孫頁面，用于展示某一個案例的詳細情況。這三個頁面之間可以用文字鏈接的形式將他們鏈接起來，以便可

12、以互相點擊。2.2 頁面構(gòu)造分析 專題首頁圖2-1 專題首頁首頁中最上面是頁面導航部分，然后是頁面的flash部分，再下面是首頁的主體內(nèi)容部分，這部分是典型的左右兩欄式設(shè)計：左邊是4個相同的圖片加一小段文字介紹的形式，右邊是兩列相同的姓名加日期的形式。接著最后是網(wǎng)站的底部鏈接、底部聲明、底部版權(quán)等。 專題列表頁圖2-2 專題列表頁列表頁中最上面是頁面導航部分，然后是頁面的flash部分，再下面是列表頁的主體內(nèi)容部分：這部分是一些相同的圖片+文字的形式，再加上列表下面進行翻頁的部分。接著最后是網(wǎng)站的底部鏈接、底部聲明、底部版權(quán)等。max

13、. 專題內(nèi)容頁圖2-3 專題內(nèi)容頁內(nèi)容中最上面是頁面導航部分，然后是頁面的flash部分，再下面是內(nèi)容的主體內(nèi)容部分：主要是文字加圖片的介紹，以及回到上一級欄目或者上上級欄目的鏈接。接著最后是網(wǎng)站的底部鏈接、底部聲明、底部版權(quán)等。第三章 搭建模型給他們安排足夠合適的“房間”3.1 畫出簡圖根據(jù)上面對頁面的初步分析，可以知道這三個頁面是以“導航+flash+內(nèi)容+底部”構(gòu)成的，所以我們畫出三個頁面的草圖的時候可以給這幾處相同的部分同樣的命名，讓他們引用相同的CSS，得到一致的樣式。圖3-1 首頁簡圖圖3-2 列表頁簡圖圖3-3 內(nèi)容頁簡圖3.1 用div把他們的房子搭建起來

14、 基本構(gòu)成通用的“房間”首先，每個頁面最外面設(shè)置一個div將所有內(nèi)容包裹起來，以便后面設(shè)置css樣式的時候，可以將頁面整體居中： div class all 為了以后的設(shè)計更方便，我在這些div之間添加上一些個人的注釋，注釋的格式為： !-if !IE 注釋內(nèi)容 !endif- 或者 !-注釋內(nèi)容- 然后再在這個最外層的div里面設(shè)置其他的div div class all div class menu img src images/menu.jpg border 0 usemap #Map / map name Map id Map area shape rec

15、t coords 64,28,127,57 href # / area shape rect coords 171,29,247,55 href # / area shape rect coords 290,28,352,57 href # / area shape rect coords 664,28,725,56 href # / area shape rect coords 778,29,839,56 href # / area shape rect oords 888,28,949,57 href # / !-if !IE 導航條部分：使用熱點+圖片的做成導航的鏈接!endif- di

16、v class banner object classid clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase /pub/shockwave/cabs/flash/swflash.cab#version 7,0,19,0 width 880 height 280 param name movie value flash/flash_visual.swf / param name quality value high / param name wmode value transparent /

17、embed src flash/flash_visual.swf width 880 height 280 quality high pluginspage /go/getflashplayer type application/x-shockwave-flash wmode transparent !-if !IE 插入flash !endif- div class h_pagebody !-if !IE 主體內(nèi)容 !endif- div class footer 東方總部地址：湖北省武漢市漢口建設(shè)大道青年路同成廣場A棟一單元27樓 武昌地址：湖北省

18、武漢市武昌區(qū)中北路楚天都市花園D座15 咨詢熱線nbsp;  客服熱線Copyright 2003-2010東方麗人婚戀DFLR.NET All Rights Reserved !-if !IE 底部聲明 !endif- 首頁div構(gòu)成除了上面搭造的基本構(gòu)成之外，再設(shè)置首頁div的主體內(nèi)容部分，也就是 div class h_pagebody 之間的部分，之前已經(jīng)分析過，首頁的主體部分是典型的兩欄式設(shè)計，所以我可以將這兩欄寫成： div class h_pagebody div clas

19、s leftbody div class rightbody 而左邊是4個相同的圖片加一小段文字介紹的形式，右邊是兩列相同的姓名加日期的形式。這兩部分都是由循環(huán)的列表構(gòu)成，這里，我可以使用一個名為 的無序列表的標簽：左邊可以寫成： ul class ”case” a href # img src images/h_caseimg.jpg/ !圖片- div class h_cast_tit !文字內(nèi)容介紹- div class member male !男方姓名- div class member female !女方姓名- div class more a href # 點擊查看 !點擊后即

20、可查看這一對新人的詳細故事即進入詳細內(nèi)容頁面- 右邊可以寫成： ul class namelist div class name 男方姓名和女方姓名 div class riqi 2010-01-19 首頁的div基本構(gòu)成就結(jié)束了。 列表頁div構(gòu)成由之前的分析知道列表頁的主體內(nèi)容部分是循環(huán)圖3-4這一部分：圖3-4 列表頁循環(huán)部分該列表也可以分為左右兩部分，圖片+文字+背景為左邊部分，文字段落為右邊部分： ul class fallinlove div class left img src # width 309 height 160 / span class

21、riqi 2010-9-10 div class h_cast_tit div class member male div class member female div class right 大山的孩子  大山的媳婦兒 李廣：在搜索到她的時候，我發(fā)現(xiàn)她的內(nèi)容里寫的都挺符合我的要求，所以就想多了解一下。在聊天的過程中我以誠相待，見了面后，更是下定了決心，確定了就是她。她的漂亮大方，賢惠溫柔深深的打動了我，我們過的每一天都很快樂。緣分到了，怎么擋都擋不住的。呵呵我們從內(nèi)心感到非常的快樂和幸福！ 李廣：在搜索到她的時候，我發(fā)現(xiàn)她的內(nèi)容里寫的都挺符合我的要求，所以就想多了解一下

22、。在聊天的過程中我以誠相待，見了面后，更是下定了決心，確定了就是她。她的漂亮大方，賢惠溫柔深深的打動了我，我們過的每一天都很快樂。緣分到了，怎么擋都擋不住的 div class more2 a href # 查看詳細 列表頁還需要頁碼，div寫成： div class prevnext span class total 18 span class else a href # 上十頁 span class first a href # 1 span class else 2 span class else 3 span class else a href # 4 span class else

23、5 span class else 6 span class else 7 span class else 8 span class else 9 span class else 10 span class else 下十頁 內(nèi)容頁div構(gòu)成依舊是和上面一樣，分為左右兩個部分： div class link id con_link a href # 上傳你的成功故事   |   a href # 瀏覽更多成功故事 div class left eng id con_bg img src images/listimg.jpg

24、 width 309 height 160 / span class riqi 2010-9-10 div class h_cast_tit div class member male div class member female div class more3 a href # 查看他們的幸福相冊 大山的孩子  大山的媳婦兒 p id pbg 李廣：在搜索到她的時候，我發(fā)現(xiàn)她的內(nèi)容里寫的都挺符合我的要求，所以就想多了解一下。在聊天的過程中我以誠相待，見了面后，更是下定了決心，確定了就是她。她的漂亮大方，賢惠溫柔深深的打動了我，我們過的每一天都很快樂。緣分到了，怎么擋都擋

25、不住的。呵呵我們從內(nèi)心感到非常的快樂和幸福！ 李廣：在搜索到她的時候，我發(fā)現(xiàn)她的內(nèi)容里寫的都挺符合我的要求，所以就想多了解一下。在聊天的過程中我以誠相待，見了面后，更是下定了決心，確定了就是她。她的漂亮大方，賢惠溫柔深深的打動了我，我們過的每一天都很快樂。緣分到了，怎么擋都擋不住的 特別說明 標簽是指標題標簽。第四章 設(shè)計樣式讓“房子”看起來更漂亮4.1 樣式表簡介 什么是CSSCSS是Cascading Style Sheets 層疊樣式表 的簡稱。 CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執(zhí)行 屬于瀏覽器解釋型語言 . max.book11

26、8.com CSS的作用在標準網(wǎng)頁設(shè)計中CSS負責網(wǎng)頁內(nèi)容 XHTML 的表現(xiàn)。CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴?？梢酝ㄟ^簡單的更改CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,可以減少工作量,所以她是每一個網(wǎng)頁設(shè)計人員的必修課。 將樣式表加入HTML中 LINK REL StyleSheet HREF style.css TYPE text/css MEDIA screen 標記是放置在文檔的HEAD部分?？蛇x的TYPE屬性用于指定媒體類型-text/css是一個層疊樣式表-允許瀏覽器忽略它們不支持的樣式表類型

27、。為CSS文件配置服務(wù)器而將text/css當作Content-type內(nèi)容發(fā)送出去也是一個好注意。外部樣式表不能含有任何像 或 這樣的HTML的標記。樣式表僅僅由樣式規(guī)則或聲明組成。一個單獨由P margin: 2em 組成的文件就可以用作外部樣式表了。 標記也有一個可選的MEDIA屬性，用于指定樣式表被接受的介質(zhì)或媒體。允許的值有 screen 缺省值 ，提交到計算機屏幕； print， 輸出到打印機； projection，提交到投影機； aural，揚聲器； braille，提交到凸字觸覺感知設(shè)備； tty，電傳打字機 使用固定的字體 ； tv，電視機； all，所有輸出設(shè)備。 多樣的

28、媒體通過用逗號隔開的列表或值all指定。4.2 給頁面添加樣式 相同板塊用同樣的樣式* margin:0; padding:0; *代表所有，這個樣式的意思是將頁面中所有的標簽的內(nèi)外邊距都清除為0.因為有一些標簽即使未設(shè)置任何內(nèi)外邊距，它會有一些默認的邊距，如果不清除為0，會在頁面中造成一些我不想出現(xiàn)的效果。body font-family:宋體; font-size:14px; color:#666; text-align:center; background:url ./images/body_bg.jpg no-repeat #404040 center t

29、op; 設(shè)置整個頁面的屬性：字體為宋體，大小為14px；顏色是#666；讓頁面居中；給她一個背景。.all width:1003px; margin:0 auto; text-align:left; 設(shè)置最外層的div： margin：0 auto；這一段代碼與body標簽中設(shè)置的text-align:center;可以使整個頁面居中顯示；讓她的大小為1003px；讓頁面內(nèi)容居左，因為在上一個body標簽設(shè)置的時候我讓所有的標簽都居中了。a text-decoration:none; color:#666; 設(shè)置鏈接標簽，讓所有的鏈接都無下劃線，顏色為灰色。a:hover color:#e50

30、b82; 設(shè)置鼠標劃過鏈接時的顏色。p line-height:1.6em; 設(shè)置段落標簽，讓段落內(nèi)文章行間距是1.6倍的文字大小。img display:block; 設(shè)置圖片標簽，讓所有的圖片以塊顯示，這樣圖片和文字間就不會有間距。a img border:0; 設(shè)置圖片的鏈接標簽，如果圖片被添加了鏈接的時候，不會有藍色的邊框出現(xiàn)。.menu,.banner,.footer,.h_pagebody float:left; 讓menu，banner，footer，h_pagebody都向左浮動.banner,.h_pagebody,.menu,.footer clear:both; 清除他們

31、的浮動，也就是等同于換行.banner,.h_pagebody,.menu width:1003px; 設(shè)置他們的寬度為1003px，讓他們占滿整個大的div.footer width:1001px; padding-top:20px; height:65px; background:url ./images/footer_bg.jpg repeat-x; margin-top:15px; 都這里，頁面就變成了：圖4-1 寬屏下的樣子 首頁的樣式要使首頁變得完整，需要再寫出：圖4-2 首頁主體內(nèi)容根據(jù)上文的分析得出這一部分分為左右，并且我已經(jīng)寫出這部分的代碼了，主

32、要是由兩個大的 包含著幾個 構(gòu)成，ul是無需列表，li是無序列表的列表項，不斷的循環(huán)li或者ul可以得到上面的頁面。可以寫出他的css：.h_pagebody background:url ./images/h_page.jpg no-repeat; height:502px; .leftbody width:721px; padding:0px 5px 0 5px; .rightbody width:255px; .case width:721px; .case li width:316px; height:209px; padding:11px 14px 0 14px; backgroun

33、d:url ./images/h_case.jpg no-repeat; margin-left:8px; margin-top:15px; .case li:hover background:url ./images/h_casecha.jpg no-repeat; color:#fff; .case li:hover a color:#fff; .h_cast_tit,.more margin-top:16px; .h_cast_tit width:256px; .namelist color:#fff; margin-top:80px; margin-left:8px; width:25

34、0px; .namelist li height:13px; padding-top:10px; .name width:180px; font-weight:bold; overflow:hidden; 即可得出首頁：圖4-3 首頁 列表頁的樣式列表頁也是一個不斷循環(huán) 之間的內(nèi)容。上面已經(jīng)將li的內(nèi)容寫了出來，現(xiàn)在我就寫li的css。.l_pagebody border:1px solid #fff; background:#eee; padding:8px 0 8px 5px; width:985px; .fallinlove padding:12px; wi

35、dth:961px; height:228px; .fallinlove background:url ./images/list_bg_fil.jpg no-repeat; .left .riqi color:#000; margin:20px 0 0 13px; .left .h_cast_tit margin-top:9px; margin-left:3px; h1 font-family:微軟簡粗黑, 宋體; font-size:22px; color:#e71b8c; margin-bottom:5px; .left width:309px; .right margin-left:2

36、0px; width:615px; .l_pagebody p line-height:1.7em; .more2 margin-top:5px; 得到下圖的內(nèi)容：圖4-4 列表頁列表項列表頁還需要頁碼的css：.total,.else height:10px; border:1px solid #ccc; margin-right:5px; .else padding:5px 5px 5px 5px; color:#008cf8; .else a,.total a color:#008cf8; .first padding:5px 5px 5px 5px; color:red; height

37、:10px; border:1px solid red; margin-right:5px; .first a color:red; .total padding:5px 8px 5px 8px; font-weight:bold; color:#008cf8; 列表頁頁面如下：圖4-5列表頁 內(nèi)容頁的樣式內(nèi)容頁是一個圖文混排的結(jié)構(gòu)，主要由左邊的圖片和右邊的文字環(huán)繞構(gòu)成，根據(jù)上一章中的div可以寫出css：#con_link width:965px; .more3 width:309px; text-align:right; margin-top:5px; #co

38、n_bg padding:13px; margin-right:5px; .mar background:url ./images/pmar.jpg no-repeat; .fil background:url ./images/pfil.jpg no-repeat; .eng background:url ./images/peng.jpg no-repeat; #pbg background:url ./images/pbg.jpg repeat; margin:13px; line-height:29px; 圖4-6內(nèi)容頁總 結(jié)此畢業(yè)設(shè)計講述了div+css在實際中的應用，此技術(shù)是由web協(xié)會和w3c協(xié)會所開發(fā)研究的，此項技術(shù)經(jīng)過了長期的測試，div+css是表現(xiàn)與形式的分離，使網(wǎng)頁文件更小，更加方便網(wǎng)頁設(shè)計者的修改，以及一些