黃楚鵬

摘要：DIV+CSS技術是目前比較成熟的網(wǎng)頁布局設計技術，由于其編寫的代碼可讀性高、簡潔，以及后續(xù)維護方便等優(yōu)勢，目前廣泛應用于網(wǎng)頁設計中。該文基于DIV+CSS的頁面布局方式，以自建網(wǎng)頁（音樂論壇）為樣例，對CSS樣式的框架布局、選擇器類型、盒子模型，以及浮動模型進行闡述并加以運用，最終實現(xiàn)頁面布局的設計效果。

關鍵詞：CSS；DIV 網(wǎng)頁設計；頁面布局

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2017）04-0045-01

在網(wǎng)頁設計中，與傳統(tǒng)布局方式相比， DIV+CSS技術是一項常見的技術，它能提升頁面的實際設計效果[1]。因此，也受到很多設計人員的青睞。本文以自行設計的一個網(wǎng)頁為例子，闡述網(wǎng)頁設計過程中，DIV+CSS布局設計的使用。

1 傳統(tǒng)布局方式

傳統(tǒng)布局主要有框架布局、層布局和表格布局幾種：框架布局支持滾動條，方便導航，但兼容性差，應用范圍有限，適合小型網(wǎng)站；層布局方法簡單，但是難以實現(xiàn)頁面內(nèi)容的精準定位，因此在頁面布局中也不常用；表格布局是網(wǎng)頁設計一個重要元素，使頁面信息布局合理、簡潔，但是設計復雜，修改更復雜，很難進行二次開發(fā)，因此也不常用[2]。

2 使用DIV+CSS進行頁面布局

與傳統(tǒng)的HTML頁面設計語言相比，DIV+CSS布局方法可實現(xiàn)網(wǎng)頁頁面內(nèi)容與網(wǎng)頁的外觀表現(xiàn)相分離。目前網(wǎng)站設計中多采用這種方式實現(xiàn)定位，以下就以使用DIV+CSS技術進行網(wǎng)頁布局的過程及注意事項進行闡述。

1）頁面布局總體設計

使用線框圖等方式進行網(wǎng)頁最初的總體設計，前期的良好規(guī)劃將為后期設計奠定基礎。只要位置確定下來，基本頁面風格就確定下來了，接下來的工作就是通過DIV+CSS往頁面中填充內(nèi)容了。

2）內(nèi)容區(qū)域用DIV包含，并設定格式

DIV在網(wǎng)頁中表示一個塊，如果不填充實際內(nèi)容或者設定格式，那么它并無意義。我們可以把DIV看作是一個容器，它可以容納內(nèi)聯(lián)元素和其他塊。

一般的網(wǎng)頁設計，結(jié)構(gòu)上可以分為頂部信息（header）、導航（nav）、主要內(nèi)容（main）和頁腳信息（footer）四個部分。通過DIV將各個部分作為一個塊建立起來，并用CSS語法進行初步的樣式設計。

CSS全稱為“層疊樣式表 （Cascading Style Sheets）”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。CSS樣式表分為3種，分別是嵌入式樣式表、外鏈樣式表和內(nèi)聯(lián)樣式表，它們的優(yōu)先等級分別是（嵌入式>內(nèi)聯(lián)、外鏈）。為了方便后期的維護，設計人員一般會采用外鏈樣式表進行設計。

選擇器是CSS中用來指明網(wǎng)頁要使用樣式規(guī)則的元素，常見的選擇器有4種，分別是ID選擇器、Class選擇器、標簽選擇器和偽類選擇器，其中ID選擇器權(quán)重最高，且一個頁面中ID的樣式是唯一的，只能使用一次。

3）CSS編輯每個DIV塊的屬性

盒子模型是CSS設計中所使用的一種思維模型，要使用CSS對頁面進行布局，就必然會使用到盒子模型。盒子模型一般有4個屬性：內(nèi)容（content）、填充（padding）、邊框（border）和邊界（margin）。使用盒子模型可以調(diào)整DIV在頁面中的位置，達到設計人員要求的效果，但有一些DIV塊需要層疊放置，此時則需要用到CSS布局的另一種功能，即布局樣式或者布局模板。常見的布局樣式有流動模型（Flow）、浮動模型（Float）和層疊型（Layer）。以樣例圖1為例，“音樂論壇”使用多個DIV作為容器，裝載相關內(nèi)容，并通過CSS的ID選擇器、類選擇器、標簽選擇器和偽類選擇器，基于盒子模型進行設置DIV塊的樣式。為了布局的美觀，使用浮動模型（Float）將DIV塊進行并排設計。樣例部分代碼為圖2所示。

3 結(jié)束語

為了將頁面的結(jié)構(gòu)劃分為不同的小區(qū)域，裝載到每一個DIV中，可以使用DIV+CSS布局，然后利用CSS對DIV塊進行編輯加工處理，是頁面達到我們想要的效果，實現(xiàn)結(jié)構(gòu)、表現(xiàn)和行為的分離。這樣做不僅可以提高頁面的開發(fā)效率，而且在后期的維護上也能節(jié)省很多時間，提高效率?？傮w來說，利用CSS+DIV對網(wǎng)頁進行布局是一項高效的網(wǎng)站開發(fā)方式，通過這門技術能夠很好地實現(xiàn)開發(fā)要求。

參考文獻：

[1] 支和才，葉賓，吳嶸.網(wǎng)頁制作三合一項目教程[M].上海：上海科學普及出版社，2015.

[2]王國慶.探究基于DIV+CSS技術的網(wǎng)頁設計優(yōu)化方法[J].信息與電腦，2016（4）： 140-141.