DIV+CSS技術在網頁布局中的應用

王海榕

摘 要 信息科學技術的進步使得互聯網技術行業快速發展起來。其中網頁設計作為互聯網技術行業中重要的一部分，應用先進技術提高其工作效率與工作質量具有重要意義。DIV+CSS技術在網頁布局中的優勢作用使得其在網頁設計與開發中應用越來越廣泛。基于此，本文首先對DIV+CSS技術進行概述，并對其在網頁布局中的優勢與應用原理進行分析，最后舉出網頁設計的實例對該項技術的具體應用進行分布闡述。

【關鍵詞】DIV CSS 網頁布局 實踐

當前，我國的信息技術得到了突飛猛進的發展，逐漸滲透到人們的生活與工作中，互聯網已經成為不可或缺的重要工具。隨著互聯網的不斷發展，網頁開發與設計的功能日益強大。傳統表格布局技術一些弊端的凸顯使得DIV+CSS技術的應用逐漸增強，并且受到互聯網行業的青睞。該種布局技術能夠準確定位網頁設計中的對象，提高網頁傳輸與下載的速率，并且能夠降低網頁維護的難度，簡化操作流程。

1 DIV+CSS技術概述

1.1 DIV技術

作為DIV+CSS技術中不可缺少的一部分，DIV也是設計、開發網頁過程中的應用語言、標記元素，為文檔提供布局結構。DIV起始到結束標簽之間包含的內容都是HTML文檔中大塊的構成部分，還能把其稱作定位技術，控制整個設計與開發中的元素。

1.2 CSS技術

即為Cascading Style Sheet（層疊樣式表），在設計網頁時，CSS能夠對頁面的顏色、布局與背景等進行有效控制，豐富頁面效果。另外，還能在一定程度上簡化操作流程，也能提高網頁語言的簡潔性。在傳統的表格布局技術中，也曾使用CSS技術。

1.3 DIV+CSS技術

該種布局技術進一步規范網頁設計中的結構，規整頁面中的元素，分離內容與樣式，使之成為單獨個體。另外，在將DIV與CSS進行合并的過程中，能夠提高網頁操作的靈活性與方便性。

2 DIV+CSS技術在網頁布局中的優勢

2.1 分離內容與樣式，精簡代碼

將內容與樣式進行分離，是該種布局技術最為顯著的特征。樣式由獨立樣式文件進行放置，鏈接到html文件中，通過對外部樣式表里CSS樣式屬性的修改，就可以改變整個站點的版式。通過對應用CSS與未應用CSS技術的排版代碼進行分析，能夠發現應用CSS樣式進行排版的代碼要簡潔得多。由此可見，CSS布局方式具有明顯的優勢。

2.2 瀏覽頁面更快速

相較于以往表格嵌套布局，應用該種布局技術能夠顯著提高網頁瀏覽與加載的速度。這是因為在達到相同頁面效果的情況下，該種布局技術的頁面容量小于表格排版。

2.3 利于搜索引擎爬蟲

利用該種布局技術，結構清晰，容易被搜索引擎搜索到，并且使排名結果得到上升。另外，應用CSS能夠突出網頁中的正文部分，方便搜索引擎進行采集與尋找。

2.4 方便進行網頁維護

傳統表格布局，頁面需要修改時，往往需要改動大量代碼，工作量巨大，而DIV+CSS技術在網頁布局中的應用能夠便于控制樣式，降低網頁維護的難度，并且便于進行修改。

3 DIV+CSS技術在網頁布局中應用原理

3.1 盒子模型

該種布局技術的核心為CSS盒子模型，也是網頁布局的基礎。HTML文檔之中包含的每一個盒子都能看做由內容、填充、邊框與邊界四部分組成。每一個部分都具有四個邊：top、right、bottom與left，可以單獨修改一個邊，也可以同時修改全部邊。

3.2 定位和浮動

CSS中包括三種基本的定位機制：普通流、定位和浮動。普通流就是元素按照其在HTML中的位置先后次序依次顯示，行內元素共處一行之中，塊級元素占一行或多行。相對定位與絕對定位應用比較廣泛。在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。若使用絕對定位方式，絕對定位使元素的位置與文檔流無關，因此不占據空間。若一個盒子設置成浮動定位，浮動將元素從原來的占位中刪除，使元素可以左右移動，直到它的外邊框邊緣碰到包含塊或另一個浮動元素的邊緣。若是需要清除臨近元素的浮動，可以利用clear屬性進行清除。

4 DIV+CSS技術在網頁布局中的實踐應用

4.1 網頁布局、規劃

網頁制作的基礎為效果圖的制作，不僅需要迎合建設方的需求，還要滿足用戶訪問的需要。得到一張美工圖片后，應該從上下、上中下、左右等展開思考。例如，將一個布局模式為上中下的網頁作為實例進行分析，該網頁中含有網站的標識與導航條，在布局中能夠應用DIV技術，采用左右浮動進行定位。選取一張視覺效果好的圖片作為Banner條，使用DIV標簽進行定位，使用獨立DIV對中間部位進行控制。該網頁底部存在版權方面的信息，也使用DIV標簽實現布局。

將DIV+CSS技術的網頁布局理念作為依據對整個主頁的結構進行劃分，得出DIV框架的結構圖，將此圖作為顯示出每個區塊嵌套關系的依據。

4.2 設計網頁布局的代碼

在美國夢想編織者應用軟件中，新建立一個HTML文檔，同時建立一個外部文件CSS，再制作該外部文件的鏈接，插入到之中。在HTML文檔中將DIV基本結構插入到中，編寫適合的代碼進行操作。

4.3 設計CSS樣式代碼

通過CSS樣式，可以控制DIV的位置、寬度、高度，邊框等屬性，改變字體，字號，顏色，背景圖片等用以達到設計圖的效果。

5 結語

本文舉出應用DIV+CSS技術的網頁布局實例，對該種布局技術的實踐應用進行深入探討，對網頁制作過程進行簡要介紹。DIV+CSS技術應用在網頁布局中，不僅能夠分離內容與樣式，還能顯著提高搜索引擎的爬行效率與友好度。以往使用的表格布局技術操作難度低、網頁制作比較快，并且便于初學者控制，針對網頁設計入門而言較為適用。但是網絡技術的不斷創新與發展使得表格布局方式逐漸被淘汰，雖然DIV+CSS布局技術應用難度大于表格布局，但是針對該項技術的開發、重構與Web標準相符，在網站設計中具有廣闊的應用前景。

參考文獻

[1]劉小艮.網頁設計中DIV+CSS布局技術的應用實踐探討[J].無線互聯科技，2015（23）：34-35.

[2]洪秀金.DIV_CSS技術在網頁布局中的應用[J].電子技術與軟件工程，2016（12）：30-30.

[3]呂潁潁.CSS+DIV布局技術在網頁制作中的應用[J].時代報告：學術版，2015（04）：268-268.

[4]田佳妮，翟悅.DIV+CSS在網頁布局中的應用研究[J].電腦知識與技術，2015（02）：181-191.

作者單位

交通運輸部科學研究院 北京市 100029