DIV+CSS技術(shù)在網(wǎng)頁(yè)重構(gòu)中的技巧應(yīng)用

周 瀟

（忻州職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)系，山西 忻州 034000）

DIV+CSS技術(shù)在網(wǎng)頁(yè)重構(gòu)中的技巧應(yīng)用

周 瀟

（忻州職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)系，山西 忻州 034000）

DIV+CSS作為目前網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)，得到了廣泛的應(yīng)用.網(wǎng)頁(yè)重構(gòu)，最主要的好處在于實(shí)現(xiàn)了網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)化，摒棄傳統(tǒng)的表格布局方式，充分達(dá)到內(nèi)容、表現(xiàn)和行為三者的分離，使得HTML代碼更加容易閱讀和維護(hù)，同時(shí)文件也變得更小。分析了DIV+CSS網(wǎng)頁(yè)重構(gòu)在網(wǎng)站設(shè)計(jì)中的優(yōu)勢(shì)，并總結(jié)了在網(wǎng)頁(yè)重構(gòu)中的一些編程技巧.

DIV+CSS；網(wǎng)頁(yè)重構(gòu)；技巧

1 DIV+CSS網(wǎng)頁(yè)重構(gòu)概述

1.1 傳統(tǒng)的網(wǎng)頁(yè)布局

在網(wǎng)頁(yè)制作中，Table布局在所謂的WEB2.0盛行前是比較流行的布局方式，甚至現(xiàn)在對(duì)于網(wǎng)頁(yè)制作初學(xué)者來(lái)說(shuō)，Table 布局依然是一種很好的方式.但是傳統(tǒng)Table布局方式只是利用了HTML的Table元素所具有的零邊框特性.Table布局的核心是：設(shè)計(jì)一個(gè)能滿足版式要求的表格結(jié)構(gòu)，將內(nèi)容裝入每個(gè)單元格中，間距及空格使用透明gif圖片實(shí)現(xiàn)，最終的結(jié)構(gòu)是一個(gè)復(fù)雜的表格（有時(shí)候會(huì)出現(xiàn)多次嵌套），如圖1所示.顯然，這樣不利于設(shè)計(jì)和修改.

圖1 傳統(tǒng)的Table布局示意圖

圖2 DIV+CSS布局示意圖

1.2 DIV+CSS網(wǎng)頁(yè)布局及特點(diǎn)

CSS是Cascading Style Sheets（層疊樣式表）的縮寫，也叫級(jí)聯(lián)樣式表.它是定義HTML元素樣式的一種結(jié)構(gòu)化語(yǔ)言，它將對(duì)象通過(guò)腳本程序調(diào)用和改變對(duì)象的屬性而引入到HTML中，使對(duì)象產(chǎn)生動(dòng)態(tài)的效果.

DIV可以說(shuō)是一個(gè)容器，一個(gè)比表格更適合布局的塊狀元素.它代碼量少，用于頁(yè)面的整體布局.但頁(yè)面的屬性必須通過(guò)CSS來(lái)實(shí)現(xiàn)，但它比Table簡(jiǎn)潔，容易控制.在網(wǎng)頁(yè)布局中利用DIV發(fā)揮網(wǎng)頁(yè)里每一種元素最優(yōu)的特性,然后把它用到最適合它用的地方.

DIV+CSS簡(jiǎn)單的說(shuō)就是DIV對(duì)頁(yè)面進(jìn)行排版，CSS來(lái)美化頁(yè)面.利用DIV+CSS進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)可以使網(wǎng)頁(yè)代碼簡(jiǎn)潔、易讀，強(qiáng)化了代碼的重用，區(qū)塊分明，布局容易，改版方便，樣式定義靈活等特點(diǎn)得以展現(xiàn)，但由于DIV+CSS的邏輯性比較強(qiáng)，頁(yè)面比較復(fù)雜，使頁(yè)面的維護(hù)更加繁雜，而代碼重用性則會(huì)導(dǎo)致它修改困難，須謹(jǐn)慎對(duì)之.如圖2所示.

2 利用DIV+CSS網(wǎng)頁(yè)重構(gòu)的幾點(diǎn)技巧

用DIV+CSS 進(jìn)行網(wǎng)頁(yè)重構(gòu)比用Table布局將體現(xiàn)出更多的優(yōu)勢(shì)，但對(duì)于大型項(xiàng)目，則不容易管理，尤其是在CSS書寫風(fēng)格等方面的迥異會(huì)造成整體的難以協(xié)調(diào)，所以對(duì)于初學(xué)者來(lái)說(shuō)，在使用DIV+CSS進(jìn)行網(wǎng)頁(yè)重構(gòu)的過(guò)程中可能會(huì)遇到各式各樣的問(wèn)題，在這里討論幾點(diǎn)利用DIV+CSS網(wǎng)頁(yè)重構(gòu)的技巧.

2.1 設(shè)置網(wǎng)頁(yè)整體居中

以前用表格布局時(shí)設(shè)置網(wǎng)頁(yè)居中非常方便，把表格對(duì)齊方式設(shè)置為居中就行了，現(xiàn)在用DIV+CSS樣式表控制代碼如下：

這段代碼，寬度適合800*600分辨率瀏覽器的寬度，margin:0 auto這句代碼就是讓居中了，意思是邊距上下設(shè)置為0，左右設(shè)置為自動(dòng).text-allgn:center;是為IE6以下版本而加的.

margin和padding的值的順序?yàn)轫槙r(shí)針上右下左，如margin：1px 2px 3px 4px;還可以縮寫為上下，左右，如本例.如果為margin:0px;則各邊都為0.

2.2 設(shè)置層的透明度

有時(shí)候我們需要用到層的透明度，把下面的背景透出來(lái).

代碼如下：

把這兩句代碼加入到要實(shí)現(xiàn)半透明層的CSS樣式表里即可，并且opacity的值可以根據(jù)需要來(lái)改變.

2.3 使用縮寫

為了提高書寫代碼的速度，以便更容易閱讀，采用代碼縮寫以減少CSS文件的大小.CSS代碼縮寫主要包括顏色、盒尺寸，邊框（border），字體（font），列表（list）、背景（background）等.如 list的屬性:

list-style-type:circle;

list-style-position:inside;

list-style-image:url（arrow.gif）;

可以縮寫為一句：list-style:circle inside url（arrow.gif）;

2.4 使用CSS繼承

CSS繼承表現(xiàn)在HTML元素的包含關(guān)系中，所有在選擇符中嵌套的選擇符都會(huì)繼承外層選擇符指定的屬性值，它能讓頁(yè)面的代碼減少重復(fù)利用率.例如，一個(gè)body定義了的顏色值也會(huì)應(yīng)用到段落的文本中.

這樣頁(yè)面中的文本樣式就都變成藍(lán)色了.

2.5 合并多重選擇器

如果網(wǎng)頁(yè)中有共同的樣式的話，可以合并多個(gè)CSS選擇器為一個(gè).這樣不但代碼簡(jiǎn)潔明了并且節(jié)省了書寫代碼的時(shí)間和空間.如：

h1{color:red;font-size:16px;font-weight:bold;}

h2{color:red;font-size:16px;font-weight:bold;}

h3{color:red;font-size:16px;font-weight:bold;}

可以合并為:

h1,h2,h3{color:red;font-size:16px;font-weight:bold;}

2.6 利用CSS圖像拼合技術(shù)（CSS Sprites技術(shù)）

圖像的拼合技術(shù)即把所有用到的背景圖片合并為一張圖片，利用CSS背景屬性，來(lái)控制圖片的顯示位置和方式.圖像的拼合技術(shù)的應(yīng)用可以大大減少http請(qǐng)求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了加載圖片所需要的時(shí)間延遲，網(wǎng)頁(yè)瀏覽更流暢.

2.7 保持CSS的可讀性和可維護(hù)性

代碼書寫完成后網(wǎng)站并不能夠完全定型，還需要不斷的維護(hù)和修改.結(jié)構(gòu)化優(yōu)良的代碼和保持CSS的可讀性能很大程度上優(yōu)化網(wǎng)站的可維護(hù)性.可以由以下幾點(diǎn)來(lái)保持CSS的可讀性和可維護(hù)性：

①用有意義的標(biāo)識(shí)來(lái)替代不易理解的數(shù)字.

②避免使用難懂的技巧性高的語(yǔ)句.

③盡可能使源程序中關(guān)系較為緊密的代碼相鄰.

2.8 避免多余的class定義

在CSS中，“.”是用來(lái)表示class的，而“#”是用來(lái)表示id的.其中，id是唯一的，不可在同一個(gè)頁(yè)面內(nèi)被重復(fù)使用，class則是可以在同個(gè)頁(yè)面內(nèi)被多次重復(fù)利用.在使用上雖然class使用率高于id，但還是要避免多余的class定義.如下左的class定義修改為右面的class定義：

2.9 使用外部樣式表

外部樣式表文件可以應(yīng)用于多個(gè)頁(yè)面，當(dāng)改變這個(gè)樣式表文件時(shí)，所有運(yùn)用這個(gè)樣式的頁(yè)面都隨之而改變.因此在設(shè)計(jì)大量相同樣式頁(yè)面的網(wǎng)站時(shí)，大大減少了重復(fù)設(shè)計(jì)的工作量，同時(shí)有利于以后的修改、編輯，瀏覽時(shí)也減少了重復(fù)下載的代碼，節(jié)約了下載時(shí)間.在實(shí)際設(shè)計(jì)中，外部樣式表文件是獨(dú)立存在的，應(yīng)用時(shí)將它導(dǎo)入或鏈入到HTML中，但是建議使用link引入外部樣式表的方來(lái)代替＠import導(dǎo)入樣式的方式.比如鏈入外部樣式表：

2.10 代碼壓縮

對(duì)于大型網(wǎng)站來(lái)說(shuō)，編寫簡(jiǎn)潔、優(yōu)化的CSS會(huì)使頁(yè)面的加載速度更快.減少注釋和空格，利用壓縮工具（如YUI Compressor）等方法可以使CSS代碼壓縮.但是CSS壓縮后代碼體積雖然變小，卻不便于修改，所以在壓縮前應(yīng)保留原始代碼，將代碼另存一個(gè).css文件.

3 總結(jié)

以上是討論的DIV+CSS網(wǎng)頁(yè)重構(gòu)的一些技巧.網(wǎng)頁(yè)重構(gòu)能夠加快網(wǎng)頁(yè)解析的速度，實(shí)現(xiàn)信息跨平臺(tái)的可用性以及更加良好的用戶體驗(yàn)，網(wǎng)頁(yè)重構(gòu)以高效開(kāi)發(fā)網(wǎng)站，簡(jiǎn)單維護(hù)并降低服務(wù)成本，最重要的是它便于改版，實(shí)現(xiàn)與未來(lái)兼容.

在網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中,更有效、更合理的運(yùn)用WEB設(shè)計(jì)標(biāo)準(zhǔn)，這需要很長(zhǎng)時(shí)間的學(xué)習(xí)和鍛煉.而如何將DIV+CSS運(yùn)用的更好，這需要通過(guò)不斷的實(shí)踐和體驗(yàn)，積累豐富的設(shè)計(jì)經(jīng)驗(yàn)，才能很好的掌握這門技術(shù).

〔1〕WEB標(biāo)準(zhǔn).百度百科[EB/OL].http://baike.baidu.com/view/7913.htm,2011-07-05.

〔2〕DIV+CSS網(wǎng)頁(yè)布局.百度文庫(kù)[EB/OL].http://wenku.baidu.com/view/128133335a8102d276a22fe2.html,2010-10-31.

〔3〕[美]M ichael Bowers.精通 CSS與 HTML設(shè)計(jì)模式[M].北京：人民郵電出版社，2008.

〔4〕何麗.精通 DIV+CSS網(wǎng)頁(yè)樣式布局[M].北京：清華大學(xué)出版社，2011.

TP393

A

1673-260X（2011）12-0025-02