基于DIV+CSS的網頁布局技術應用研究

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

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

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

二、DIV+CSS頁面布局的優勢

1.分離內容與樣式，精簡代碼。

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

2.瀏覽頁面更快速。

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

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

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

4.方便進行網頁維護。

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

三、CSS盒子模型

1.CSS盒子標準模型。

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

2.定位和浮動。

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

四、DIV+CSS布局應用實例

使用DIV+CSS布局對依韻手機網站的首頁進行重構。

1.HTML結構。

采用DIV+CSS的網頁布局，首先用DIV來分塊，定義語義結構；然后用CSS來定位和添加樣式，如位置、浮動、加入背景、對齊屬性等；最后在這個CSS定義的各個塊中添加相應的內容，如文字、圖片等。

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

2.設計CSS樣式代碼。

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

五、總結

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

參考文獻

[1]謝振華.Div+css網頁布局設計實現[J].中小企業管理與科技（中旬刊），2016.04.

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

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