DIV+CSS技術在網頁重構中的技巧應用

周 瀟

（忻州職業技術學院 計算機系，山西 忻州 034000）

DIV+CSS技術在網頁重構中的技巧應用

周 瀟

（忻州職業技術學院 計算機系，山西 忻州 034000）

DIV+CSS作為目前網頁設計的標準，得到了廣泛的應用.網頁重構，最主要的好處在于實現了網頁設計的標準化，摒棄傳統的表格布局方式，充分達到內容、表現和行為三者的分離，使得HTML代碼更加容易閱讀和維護，同時文件也變得更小。分析了DIV+CSS網頁重構在網站設計中的優勢，并總結了在網頁重構中的一些編程技巧.

DIV+CSS；網頁重構；技巧

1 DIV+CSS網頁重構概述

1.1 傳統的網頁布局

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

圖1 傳統的Table布局示意圖

圖2 DIV+CSS布局示意圖

1.2 DIV+CSS網頁布局及特點

CSS是Cascading Style Sheets（層疊樣式表）的縮寫，也叫級聯樣式表.它是定義HTML元素樣式的一種結構化語言，它將對象通過腳本程序調用和改變對象的屬性而引入到HTML中，使對象產生動態的效果.

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

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

2 利用DIV+CSS網頁重構的幾點技巧

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

2.1 設置網頁整體居中

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

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

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

2.2 設置層的透明度

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

代碼如下：

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

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

這樣頁面中的文本樣式就都變成藍色了.

2.5 合并多重選擇器

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

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圖像拼合技術（CSS Sprites技術）

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

2.7 保持CSS的可讀性和可維護性

代碼書寫完成后網站并不能夠完全定型，還需要不斷的維護和修改.結構化優良的代碼和保持CSS的可讀性能很大程度上優化網站的可維護性.可以由以下幾點來保持CSS的可讀性和可維護性：

①用有意義的標識來替代不易理解的數字.

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

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

2.8 避免多余的class定義

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

2.9 使用外部樣式表

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

2.10 代碼壓縮

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

3 總結

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

在網站建設與網頁設計過程中,更有效、更合理的運用WEB設計標準，這需要很長時間的學習和鍛煉.而如何將DIV+CSS運用的更好，這需要通過不斷的實踐和體驗，積累豐富的設計經驗，才能很好的掌握這門技術.

〔1〕WEB標準.百度百科[EB/OL].http://baike.baidu.com/view/7913.htm,2011-07-05.

〔2〕DIV+CSS網頁布局.百度文庫[EB/OL].http://wenku.baidu.com/view/128133335a8102d276a22fe2.html,2010-10-31.

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

〔4〕何麗.精通 DIV+CSS網頁樣式布局[M].北京：清華大學出版社，2011.

TP393

A

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