DIV+CSS在計算機網(wǎng)頁設(shè)計中的運用

楚子漪

【摘 要】互聯(lián)網(wǎng)發(fā)展至今，網(wǎng)絡(luò)已經(jīng)成為人們生活的重要部分，各色網(wǎng)站層出不窮，眾多網(wǎng)頁各有千秋。本文從計算機網(wǎng)頁設(shè)計中的布局入手，分析了傳統(tǒng)網(wǎng)頁布局的局限性，介紹了計算機網(wǎng)頁中典型的 “DIV+CSS”布局方式。通過對DIV 和CSS 技術(shù)的研究，介紹了DIV+CSS布局方法及其優(yōu)勢，為計算機網(wǎng)頁設(shè)計提供思路。

【關(guān)鍵詞】DIV；CSS；計算機網(wǎng)頁；布局

一、前言

傳統(tǒng)的計算機網(wǎng)頁布局的方法主要有框架布局和表格布局?？蚣懿季直容^靈活，若有效運用，則能使網(wǎng)頁更整潔、清晰。但是，對于內(nèi)容多、布局復(fù)雜的網(wǎng)站，不宜采用框架布局，因為，過多的框架會影響網(wǎng)頁下載所需的時間，影響網(wǎng)頁的讀取速度，而且瀏覽器對框架結(jié)構(gòu)的兼容性也不是很好。

表格是計算機網(wǎng)頁設(shè)計制作中的一個重要網(wǎng)頁元素，用來對網(wǎng)頁進行排版，使頁面的信息布局合理、簡潔。但是表格排版也存在以下的問題：

1.用表格排版的頁面很難再修改或升級。當(dāng)頁面制作完成后，如果要將其中的某些位置對調(diào)，那么表格排版的工作量相當(dāng)于重新制作一個頁面。而CSS排版利用position和float屬性可以輕松地移動和重新定位各個塊，實現(xiàn)讓用戶動態(tài)選擇界面的功能。

2.用表格排版的頁面在下載時必須等整個表格的內(nèi)容都下載完畢后才會一次性顯示出來，而利用DIV+CSS排版的頁面在下載時，各個子塊可以分別下載顯示，從而提高了頁面的下載速度。

3.復(fù)雜的表格設(shè)計使得設(shè)計極為不易，修改更為復(fù)雜，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有任何意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度變慢，網(wǎng)站的維護和更新困難。

二、DIV和CSS的具體內(nèi)容

DIV元素是用來為HTML文檔內(nèi)大塊的內(nèi)容提供布局的結(jié)構(gòu)和背景。它是HTML中的一個標(biāo)簽，此標(biāo)簽的作用就是定位網(wǎng)頁內(nèi)容中的圖片、文字、視頻等相關(guān)信息。一般我們也叫為DIV層定位。

CSS（cascading style sheet），層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁分離的一種標(biāo)識性語言。CSS 是 1996由W3C 審核通過，并且推薦使用的。CSS 的引入就是為了使 HTML語言更好的適應(yīng)頁面的美工設(shè)計。它以 HTML語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計者可以針對各種可視化瀏覽器（包括顯示器、打印機、打字機、投影儀和 PDA 等）來設(shè)置不同的樣式風(fēng)格。CSS的引入引發(fā)了網(wǎng)頁設(shè)計一個又一個的新高潮。使用CSS設(shè)計的優(yōu)秀頁面層出不窮。

DIV+CSS布局方式使網(wǎng)頁結(jié)構(gòu)和外觀相分離，極大地簡化了代碼，而且使站點加載的速度變得快捷、維護也更加方便，無疑對傳統(tǒng)布局的網(wǎng)頁方式造成了極大的沖擊。除此之外，DIV+ CSS布局方式的使用，使傳統(tǒng)的網(wǎng)頁布局的不足得到很好的彌補，當(dāng)前國內(nèi)多數(shù)比較著名的網(wǎng)站都利用此類方式方法進布局，給用戶帶來了全新的體驗?zāi)Ｊ健?/p>

三、DIV+CSS設(shè)計計算機網(wǎng)頁布局

采取DIV和CSS的網(wǎng)頁布局結(jié)構(gòu)，首先需要用DIV來分塊，定義語義結(jié)構(gòu)；然后用CSS來定位和添加樣式，如浮動、位置、對齊屬性、加入背景等；最后在這個CSS定義的各個塊中添加相應(yīng)的樣式，如文字、圖片等。下面通過一個布局實例介紹使用DIV+CSS布局網(wǎng)頁的基本方法。

首先，把網(wǎng)頁區(qū)分成不同的三個區(qū)塊，包括header、content（其中有main主體區(qū)域，并將main主體部分分為兩個區(qū)域lside和rside）、footer三個區(qū)域，分別作為網(wǎng)頁的頭部、內(nèi)容和版權(quán)區(qū)域。編寫HTML部分文檔代碼如下：

其次，設(shè)置其CSS樣式文件代碼如下：

#container{margin：0 auto；width：90%；}

#header{height：200px；margin-top：20px；border：2px solid；}

#content{height：500px；width：100%；margin-bottom：10px；}

#main{float：left；width：70%；height：400px；border：2px solid；}

#footer{height：60px；border：1px solid；}

其中，width屬性設(shè)置為百分比形式，表示當(dāng)窗口大小發(fā)生變化時，頁面的寬度也隨之變化。container的margin屬性為0，auto，表示上下邊距為0像素，auto表示左右邊距為自動，實現(xiàn)網(wǎng)頁的居中顯示。main的float屬性為left，表示靠左對齊，實現(xiàn)中間兩列豎欄的顯示效果。border屬性為2px solid，表示2個像素寬的實線邊框。

四、DIV+CSS布局計算機網(wǎng)頁的優(yōu)點

通過上面DIV+CSS的布局實例，可以看出使用DIV+CSS布局計算機網(wǎng)頁給網(wǎng)頁設(shè)計帶來很大的優(yōu)勢，具體如下：

（一）內(nèi)容與表現(xiàn)相分離

即CSS代碼和HTML代碼相分離，CSS可以把樣式的部分單獨的置于獨立的樣式文件中，而在HTML的文件中只放置網(wǎng)頁需要顯示的內(nèi)容，而網(wǎng)頁的內(nèi)容表現(xiàn)的形式則可以完全通過CSS文件來實現(xiàn)，消除了大量的冗余代碼，解決頁面表現(xiàn)和結(jié)構(gòu)混合在一起的問題。

（二）網(wǎng)站的更新與維護更簡易

因為CSS文件能夠被多個網(wǎng)頁鏈接或使用，當(dāng)需要重新布局網(wǎng)站頁面時，只要依照區(qū)塊的內(nèi)容標(biāo)記到CSS樣式的文件里，尋找到相應(yīng)的ID，并進行簡單的修改即可。不需要在每一個HTML文件中進行重復(fù)的設(shè)置，使修改頁面變得更加簡捷，極大地提高了網(wǎng)站更新與維護的效率，節(jié)約網(wǎng)站的運營成本。

（三）網(wǎng)頁加載迅速

當(dāng)代碼寫在了CSS文件中時，讓頁面體積變小、代碼簡潔，而且相較于表格嵌套方式而言，DIV+CSS賦予頁面更多的獨立區(qū)域，當(dāng)要打開頁面時，不會在整個頁面局限于一個大表格里，而是逐層加載，提升了頁面加載速率。

【參考文獻】

[1]王儉敏等.CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo)[M].北京：電子工業(yè)出版社，2009.

[2]張趙輝.3D網(wǎng)絡(luò)試衣技術(shù)的市場應(yīng)用分析 [J].致富時代，2015.