DIV+CSS在網(wǎng)頁布局中的應(yīng)用研究

田佳妮　翟悅

摘要：網(wǎng)頁布局對于網(wǎng)頁的設(shè)計制作非常重要， DIV+CSS是目前網(wǎng)頁設(shè)計中比較流行的一種頁面布局方式。本文通過分析DIV+CSS布局技術(shù)優(yōu)勢，闡述了DIV、CSS的布局原理，并通過一個實例說明DIV+CSS布局的基本流程和使用技巧。

關(guān)鍵詞：DIV；CSS；網(wǎng)頁布局；Web2.0標(biāo)準(zhǔn)；優(yōu)勢

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）02-0181-02

Abstract：Page layout is very important for the web page design. DIV + CSS have gradually become the most popular page layout technology. This paper analyzes the advantages of DIV and CSS layout and explains relevant layout principles. Finally， we explain implementation method and skills with a concrete example.

Key words： DIV； CSS； Page layout； Web 2.0 standard； advantage

1 引言

隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，早期的表格布局方式已經(jīng)不能適用新的要求，許多網(wǎng)站設(shè)計師開始采用Web2.0標(biāo)準(zhǔn)[1]，DIV+CSS網(wǎng)頁布局技術(shù)已成為主流的應(yīng)用模式，其結(jié)構(gòu)清晰化、便于維護(hù)和修改，提高用戶體驗度等優(yōu)勢 ，已被業(yè)內(nèi)廣泛認(rèn)可和應(yīng)用。

2 DIV+CSS布局的優(yōu)勢

（1）表現(xiàn)和內(nèi)容相分離，代碼精簡

結(jié)構(gòu)和表現(xiàn)相分離[2]，這正是CSS布局的特色所在，結(jié)構(gòu)與表現(xiàn)分離后，CSS將樣式部分單獨放在一個獨立的樣式文件中，HTML 文件只需提供網(wǎng)頁內(nèi)容， 至于內(nèi)容的表現(xiàn)形式完全由CSS 來實現(xiàn)。這樣代碼才簡潔，尤其是網(wǎng)站改版時，只需修改CSS文件內(nèi)容，HTML文件即可表現(xiàn)出不同的形式[3]。如下代碼可以加深理解結(jié)構(gòu)和表現(xiàn)相分離的含義。

通過上例可以看出如果還有更多的圖片列表，那么第二種CSS布局方法將更具優(yōu)勢。

（2）提高頁面瀏覽速度

采用DIV+CSS布局的網(wǎng)頁比傳統(tǒng)表格嵌套布局的網(wǎng)頁瀏覽、加載速度更快。針對同一個頁面效果，一般DIV+CSS構(gòu)造的頁面容量均比表格排版容量小[3]。

（3）方便搜索引擎的搜索

采用DIV+CSS布局的網(wǎng)頁有利于SEO優(yōu)化。設(shè)計后的網(wǎng)頁能夠通過W3C驗證，搜索引擎spider爬行效率將提高，并可能給予一個較高的排名結(jié)果。同時由于CSS的引用使得網(wǎng)頁中正文部分更為突出，更易于被搜索引擎采集搜錄。

（4）樣式便于操作，網(wǎng)頁便于維護(hù)

DIV+CSS布局更便于樣式的控制，使得網(wǎng)頁的維護(hù)更加方便，也更加易于修改。

3 DIV+CSS的布局原理

3.1盒子模型[4]

CSS盒子模型是DIV+CSS的網(wǎng)頁布局的核心。HTML文檔中的每一個盒子都可以看成四部分組成：內(nèi)容（content）、填充（padding）、邊框（border）和邊界（margin）。每個部分又派生出top、right、bottom、left四個分支屬性，如圖1所示。

3.2常用的定位屬性

在css中定位機(jī)制包括：標(biāo)準(zhǔn)流，定位和浮動。通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，position 屬性值分別有：static、relative、absolute、fixed。其中relative（相對定位）與absolute（絕對定位）是最常用的兩種定位方式。如果設(shè)定相對定位：元素實際上依然占據(jù)文檔中的原有位置，只是視覺上相對于它在文檔中的原有位置移動了。如果指定絕對定位時，元素就脫離了文檔，即在文檔中已經(jīng)不占據(jù)位置了。

當(dāng)某個盒子設(shè)置為float浮動定位后，將使塊級元素脫離普通文檔流，浮動的框可以向左或向右移動，直到它的外邊緣碰到最近的父包含框或另一個浮動框的邊框為止。其他鄰近元素將占據(jù)其空間表現(xiàn)得就像浮動框不存在一樣?？梢酝ㄟ^clear屬性清除鄰近某側(cè)其他元素浮動。

4 DIV+CSS布局應(yīng)用實例

采用DIV+CSS的網(wǎng)頁布局思路如下：首先用DIV分塊，定義語義結(jié)構(gòu)；然后利用CSS定位和添加樣式達(dá)到美化網(wǎng)頁效果，如：加入背景、對齊、邊框線條等；最后在CSS定義的盒子內(nèi)添加相應(yīng)的主體內(nèi)容。下面以博客首頁設(shè)計為例，通過調(diào)用外部CSS文件，實現(xiàn)如圖2效果，很好的體現(xiàn)了web標(biāo)準(zhǔn)結(jié)構(gòu)與內(nèi)容相分離的思想。

當(dāng)沒有導(dǎo)入CSS樣式表文件時，樣例頁面效果如圖2所示，只是頁面的“內(nèi)容”。如果導(dǎo)入外部CSS文件后，頁面呈現(xiàn)圖3所示效果，如果導(dǎo)入不同的外部CSS文件，呈現(xiàn)出內(nèi)容的展示效果會不同，DIV+CSS可以使得網(wǎng)頁改版和維護(hù)更加方便。下面介紹設(shè)計的具體實現(xiàn)步驟。

（1）使用DIV進(jìn)行頁面分塊

根據(jù)博客首頁的內(nèi)容需求對整體布局進(jìn)行規(guī)劃，頁面大致分為頂部、導(dǎo)航、主體內(nèi)容和底部版權(quán)四個部分。該頁面布局在頁面里只能出現(xiàn)一次，并且是唯一性，故選擇ID選擇器進(jìn)行區(qū)塊標(biāo)識，ID具有唯一性，盡量在外圍使用。

5 結(jié)語

通過一個簡單的實例可以看出，CSS+DIV布局真正體現(xiàn)了結(jié)構(gòu)和內(nèi)容相分離，可以提升搜索引擎的友好度，成為目前Web標(biāo)準(zhǔn)中的典型應(yīng)用模式。而且用CSS+DIV布局可以從根本上解決表格布局使用單元格組織版式，布局更精確，CSS提供的強大樣式定義功能比表格設(shè)置更簡單、更靈活。盡管DIV+CSS技術(shù)較表格布局難度高，但其開發(fā)和重構(gòu)符合Web標(biāo)準(zhǔn)，已成為今后網(wǎng)站設(shè)計的必然趨勢[5]。

參考文獻(xiàn)：

[1] 吳建偉. DIV+CSS在網(wǎng)頁布局和樣式中的應(yīng)用分析[J]. 計算機(jī)光盤軟件與應(yīng)用， 2011（16）：45-46.

[2] 丁海燕， 袁國武， 張澤華， 等. 用CSS+DIV開發(fā)技術(shù)實現(xiàn)網(wǎng)頁布局[J]. 實驗科學(xué)與技術(shù)， 2012， 10（4）：39-41.

[3] 黃雪琴， 耿強， 陳顯軍. 基于CSS+DIV 的自適應(yīng)寬度網(wǎng)頁布局方法[J]. 計算機(jī)與現(xiàn)代化， 2014， （6）：53-55.

[4] 車元媛. 基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用[J]. 電腦知識與技術(shù)， 2011，7（9）：1009-3044.

[5] 楊米娜. DIV+CSS技術(shù)在網(wǎng)頁布局中的應(yīng)用研究[J]. 電腦開發(fā)與應(yīng)用， 2012， 25（4）：64-66.