周 瀟

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

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

周 瀟

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

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

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

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

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

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

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

圖2 DIV+CSS布局示意圖

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

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

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

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

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

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

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

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

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

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

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

有時候我們需要用到層的透明度，把下面的背景透出來.

代碼如下：

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

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)系中，所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，它能讓頁面的代碼減少重復(fù)利用率.例如，一個body定義了的顏色值也會應(yīng)用到段落的文本中.

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

2.5 合并多重選擇器

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

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背景屬性，來控制圖片的顯示位置和方式.圖像的拼合技術(shù)的應(yīng)用可以大大減少http請求的次數(shù)，減輕服務(wù)器壓力，同時縮短了加載圖片所需要的時間延遲，網(wǎng)頁瀏覽更流暢.

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

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

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

②避免使用難懂的技巧性高的語句.

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

2.8 避免多余的class定義

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

2.9 使用外部樣式表

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

2.10 代碼壓縮

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

3 總結(jié)

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

在網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計(jì)過程中,更有效、更合理的運(yùn)用WEB設(shè)計(jì)標(biāo)準(zhǔn)，這需要很長時間的學(xué)習(xí)和鍛煉.而如何將DIV+CSS運(yùn)用的更好，這需要通過不斷的實(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)頁布局.百度文庫[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)頁樣式布局[M].北京：清華大學(xué)出版社，2011.

TP393

A

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