王海榕

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

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

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

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

1.1 DIV技術(shù)

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

1.2 CSS技術(shù)

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

1.3 DIV+CSS技術(shù)

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

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

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

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

2.2 瀏覽頁(yè)面更快速

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

2.3 利于搜索引擎爬蟲(chóng)

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

2.4 方便進(jìn)行網(wǎng)頁(yè)維護(hù)

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

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

3.1 盒子模型

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

3.2 定位和浮動(dòng)

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

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

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

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

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

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

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

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

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

5 結(jié)語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

作者單位

交通運(yùn)輸部科學(xué)研究院 北京市 100029