基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用研究

標簽可以將網(wǎng)頁劃分為許多大小不一的區(qū)塊。div標簽屬于塊級元素，具有高度、寬度、獨立成行等特性。在進行網(wǎng)頁布局排版時，需要將頁面整體上進行DIV分塊。

CSS是層疊樣式表單的縮寫，是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。對網(wǎng)頁中的布局、字體、顏色、背景等效果實現(xiàn)精確的控制，使頁面效果更豐富，操作更簡單，代碼更簡潔，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并能夠進行初步交互設(shè)計，彌補HTML的不足，使頁面變得豐富多彩。同時能夠?qū)崿F(xiàn)內(nèi)容與表現(xiàn)的分離。是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計語言。

DIV+CSS技術(shù)是一種“WEB標準”常用術(shù)語，是較為流行的網(wǎng)頁布局方法，與傳統(tǒng)中通過表格布局定位的方式不同，用IV+CSS技術(shù)制作的網(wǎng)站是在HTML中只放置頁面的內(nèi)容，CSS控制內(nèi)容的樣式，實現(xiàn)網(wǎng)頁樣式和內(nèi)容的分離。當CSS應(yīng)用于DIV的時，能讓DIV的功能更加強大，也使得DIV的運用更加的靈活和方便。

二、DIV+CSS頁面布局的優(yōu)勢

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

樣式與內(nèi)容分離，便于修改和統(tǒng)一風格使用DIV+CSS制作的網(wǎng)頁由于將樣式與內(nèi)容進行了分離，修改網(wǎng)頁的顯示效果時只需要修改CSS代碼即可。此外，若多頁面共用一個CSS文件，既可減化代碼又實現(xiàn)了網(wǎng)站的風格統(tǒng)一，維護的時候只需修改一個文件即可改變所有頁面的布局或樣式。由此可見，CSS布局方式具有明顯的優(yōu)勢。

2.瀏覽頁面更快速。

由于將樣式代碼寫在了CSS文件中，這樣代碼簡潔，讓頁面體積變小，而且相對于表格嵌套的方式，DIV+CSS將頁面獨立成更多的區(qū)域，在打開頁面的時候，逐層加載，卻不像表格嵌套那樣將整個頁面圈在一個大表格里，由此更提高了頁面的加載速度。

3.方便搜索引擎的搜索。

有利于搜索引擎優(yōu)化許多網(wǎng)頁的樣式設(shè)計代碼幾乎與頁面內(nèi)容持平甚至是超過頁面內(nèi)容，而采用DIV+CSS設(shè)計的網(wǎng)頁，在被搜索時探索引擎只需要從HTM代碼中搜索關(guān)鍵字即可，減少了探索內(nèi)容，提高了搜索效率。

4.方便進行網(wǎng)頁維護。

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

三、CSS盒子模型

1.CSS盒子標準模型。

所有頁面中的元素都可以看成一個盒子，占據(jù)著一定的頁面空間。一般通過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒子的位置。一個盒子模型由內(nèi)容、邊框、內(nèi)間隙和外間隙四個部分組成，每個盒子都具有上述四個屬性，如何確定它在網(wǎng)頁中所占據(jù)的尺寸至關(guān)重要?，F(xiàn)在多采用W3C盒模型計算方法，即盒子所占據(jù)的寬度是由內(nèi)容的寬度+左右內(nèi)邊距+左右邊框的寬度+左右外邊距，所占據(jù)的高度是由內(nèi)容的高度+上下內(nèi)邊距+上下邊框的寬度+上下外邊距組成的。其中，任意一個參數(shù)都有top（上）、bottom（下）、lef（t左）、righ（t右）四個屬性。因此可以充分利用這些屬性進行各種各樣的排版效果。CSS盒子模式是DIV+CSS網(wǎng)頁布局的核心，通過由CSS定義的大小不一的盒子和盒子嵌套來布局網(wǎng)頁。

2.定位和浮動。

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

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

使用DIV+CSS布局對依韻手機網(wǎng)站的首頁進行重構(gòu)。

1.HTML結(jié)構(gòu)。

采用DIV+CSS的網(wǎng)頁布局，首先用DIV來分塊，定義語義結(jié)構(gòu)；然后用CSS來定位和添加樣式，如位置、浮動、加入背景、對齊屬性等；最后在這個CSS定義的各個塊中添加相應(yīng)的內(nèi)容，如文字、圖片等。

網(wǎng)頁制作的基礎(chǔ)為效果圖的制作，不僅需要迎合建設(shè)方的需求，還要滿足用戶訪問的需要。網(wǎng)頁布局分為三大部分，分別為網(wǎng)頁上部、網(wǎng)頁中部、網(wǎng)頁下部，每個部分都是通欄設(shè)計，版心寬度固定，左右兩側(cè)空白區(qū)域隨屏幕的寬度大小發(fā)生變化。該網(wǎng)頁中含有網(wǎng)站的標識與導航條，在布局中能夠應(yīng)用DIV技術(shù)，采用左右浮動進行定位。選取一張視覺效果好的圖片作為Banner條，使用DIV標簽進行定位，使用獨立DIV對中間部位進行控制。該網(wǎng)頁底部存在版權(quán)方面的信息，也使用DIV標簽實現(xiàn)布局。

2.設(shè)計CSS樣式代碼。

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

五、總結(jié)

本文對使用DIV+CSS技術(shù)進行網(wǎng)頁布局所涉及到的技術(shù)進行了簡要概述，并將其應(yīng)用到網(wǎng)頁布局的實例中?；贒IV+CSS技術(shù)實現(xiàn)了網(wǎng)頁的布局定位，具有表現(xiàn)和內(nèi)容相分離等優(yōu)勢，提高了網(wǎng)站更新維護的效率，提高了網(wǎng)頁的瀏覽速度。已經(jīng)成為一種網(wǎng)頁設(shè)計的標準和趨勢。在實際操作過程中還須要根據(jù)不同的風格和內(nèi)容靈活應(yīng)用各布局元素及CSS樣式。如果今后想把DIV+CSS技術(shù)運用得更好，還需要不斷學習和豐富的實踐。

參考文獻

[1]謝振華.Div+css網(wǎng)頁布局設(shè)計實現(xiàn)[J].中小企業(yè)管理與科技（中旬刊），2016.04.

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

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