田佳妮　翟悅

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

關鍵詞：DIV；CSS；網(wǎng)頁布局；Web2.0標準；優(yōu)勢

中圖分類號：TP393 文獻標識碼：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)絡技術的不斷發(fā)展，早期的表格布局方式已經(jīng)不能適用新的要求，許多網(wǎng)站設計師開始采用Web2.0標準[1]，DIV+CSS網(wǎng)頁布局技術已成為主流的應用模式，其結構清晰化、便于維護和修改，提高用戶體驗度等優(yōu)勢 ，已被業(yè)內(nèi)廣泛認可和應用。

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

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

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

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

（2）提高頁面瀏覽速度

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

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

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

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

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

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

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

4 DIV+CSS布局應用實例

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

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

（1）使用DIV進行頁面分塊

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

5 結語

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

參考文獻：

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

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

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

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

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