DIV+CSS技術(shù)在網(wǎng)頁布局中的應(yīng)用

王海榕

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

【關(guān)鍵詞】DIV CSS 網(wǎng)頁布局 實踐

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

1 DIV+CSS技術(shù)概述

1.1 DIV技術(shù)

作為DIV+CSS技術(shù)中不可缺少的一部分，DIV也是設(shè)計、開發(fā)網(wǎng)頁過程中的應(yīng)用語言、標記元素，為文檔提供布局結(jié)構(gòu)。DIV起始到結(jié)束標簽之間包含的內(nèi)容都是HTML文檔中大塊的構(gòu)成部分，還能把其稱作定位技術(shù)，控制整個設(shè)計與開發(fā)中的元素。

1.2 CSS技術(shù)

即為Cascading Style Sheet（層疊樣式表），在設(shè)計網(wǎng)頁時，CSS能夠?qū)撁娴念伾⒉季峙c背景等進行有效控制，豐富頁面效果。另外，還能在一定程度上簡化操作流程，也能提高網(wǎng)頁語言的簡潔性。在傳統(tǒng)的表格布局技術(shù)中，也曾使用CSS技術(shù)。

1.3 DIV+CSS技術(shù)

該種布局技術(shù)進一步規(guī)范網(wǎng)頁設(shè)計中的結(jié)構(gòu)，規(guī)整頁面中的元素，分離內(nèi)容與樣式，使之成為單獨個體。另外，在將DIV與CSS進行合并的過程中，能夠提高網(wǎng)頁操作的靈活性與方便性。

2 DIV+CSS技術(shù)在網(wǎng)頁布局中的優(yōu)勢

2.1 分離內(nèi)容與樣式，精簡代碼

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

2.2 瀏覽頁面更快速

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

2.3 利于搜索引擎爬蟲

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

2.4 方便進行網(wǎng)頁維護

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

3 DIV+CSS技術(shù)在網(wǎng)頁布局中應(yīng)用原理

3.1 盒子模型

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

3.2 定位和浮動

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

4 DIV+CSS技術(shù)在網(wǎng)頁布局中的實踐應(yīng)用

4.1 網(wǎng)頁布局、規(guī)劃

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

將DIV+CSS技術(shù)的網(wǎng)頁布局理念作為依據(jù)對整個主頁的結(jié)構(gòu)進行劃分，得出DIV框架的結(jié)構(gòu)圖，將此圖作為顯示出每個區(qū)塊嵌套關(guān)系的依據(jù)。

4.2 設(shè)計網(wǎng)頁布局的代碼

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

4.3 設(shè)計CSS樣式代碼

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

5 結(jié)語

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

參考文獻

[1]劉小艮.網(wǎng)頁設(shè)計中DIV+CSS布局技術(shù)的應(yīng)用實踐探討[J].無線互聯(lián)科技，2015（23）：34-35.

[2]洪秀金.DIV_CSS技術(shù)在網(wǎng)頁布局中的應(yīng)用[J].電子技術(shù)與軟件工程，2016（12）：30-30.

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

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

作者單位

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