探析DIV+CSS布局方式制作商務網頁

楊曉姍

摘?要：布局對網頁的作用類似于設計圖對地產開發商的作用，制作商務網頁的首要內容是對網頁進行布局。常見的布局方式有：表格布局、框架布局、層布局，鑒于以上布局方式均存在一定的缺陷逐漸退出歷史潮流。目前流行的布局方式是DIV+CSS來制作頁面，DIV主要解決網頁中的元素（如文字、圖片、表格、音視頻等）放置在網頁顯示位置的問題，而CSS主要解決網頁元素美觀性的問題。本文主要探討DIV+CSS布局方式用法及要注意的問題。

關鍵詞：DIV+CSS;浮動布局;定位布局

一個商務網頁是否吸引用戶，布局至關重要。所謂布局就是對網頁元素進行定位，網頁整體結構是上中下還是左中右，網頁的LOGO、導航、網頁標題、網頁核心內容、版權信息等內容顯示的位置。鑒于表格布局導致表格標簽的嵌套瀏覽器解析較慢，框架布局不夠靈活，DIV+CSS布局方式逐漸成為主流，DIV實現把頁面進行切割，不同的DIV放置不同的內容，CSS實現對內容進行美化，如添加背景色、設置不同塊之間的間距等等。

1 DIV+CSS的概念

DIV是HTML語言中的一個標簽元素即

，該標簽代表一個容器本身沒有實際意義，是一個塊級元素，在該標簽中可以放置文字、圖片、鏈接、音樂、div等，一個頁面可以通過多個div標簽的嵌套實現對網頁進行分割，通過設置div中的內容與div的內邊距、不同div之間的外邊距來對頁面進行布局。

CSS（Cascading Style Sheets）指層疊樣式表，作用是對網頁元素進行美化，CSS可以出現在HTML標簽行中、HTML的標簽中、外部樣式表三個位置，在DIV+CSS布局中常常把CSS獨立形成一個.css文件，實現與HTML文件完全分離，可以實現樣式表的重復使用、網頁的結構與表現可以實現完全分離。CSS中主要有類選擇器、ID選擇器、復合選擇器和標簽選擇器四種，優先級順序為：復合選擇器>ID選擇器>類選擇器>標簽選擇器，復合選擇器的優先級最高、標簽選擇器的優先級最低，ID選擇器只能使用一次，類選擇器可以重復使用，在實際制作網頁過程中要根據需求靈活選擇CSS選擇器的類型。

2 DIV+CSS的運用

2.1 標準布局

標準布局是指網頁元素按HTML代碼的順序自上而下或自左向右逐步分布的，就像流水一樣，我們將這種流動方式稱為標準流或文檔流。標準流布局具有以下兩個比較典型的特征。塊級元素會在所處的包含元素內自上而下按順序垂直分布。因為在默認狀態下，不管把塊級元素的寬度設置多窄，它都會獨占一行。內聯元素會在所處的包含元素內自左向右水平分布顯示，超出一行后，會自動自上而下換行顯示，然后繼續自左向右按順序流動，依次類推。

2.2 浮動布局

標準布局不能完全滿足網頁設計的需求，有時設計需要把兩個或者多個DIV在一行顯示，此時需用到浮動布局，浮動布局的主要作用是打破標準流布局的自上而下、自左向右的布局方式，使得塊元素不獨占一行。此時可有多種方式實現效果。

方法一：left、rihgt同時左浮動或者右浮動，#left #right{float：left;};方法二：left左浮動、right右浮動，即#left{float：left;}，#right{flaot：right};方法三：left設置寬度和左浮動，right設置左外邊距值，即#left{width：200px;float：left;}，#right{margin-left：200px;};方法四：類似與方法三，right設置右浮動，left設置右外邊距。設置浮動后會給right后面的元素產生影響，為了清除這種影響通常做法是在right后添加一個空白div1，并設置改空白div的樣式#div1{clear：both;}。

2.3 定位布局

定位布局分為相對定位和絕對定位，主要是通過元素的position、z-index、overflow、clip屬性來實現，相對定位通過設置水平位置和垂直位置來實現，其在標準流中的位置仍然存在。絕對定位的使用其祖先元素必須設置定位屬性，在絕對定位中，標準流中其他元素的布局對絕對定位的元素不影響，所以會導致絕對定位的元素覆蓋其他元素，這時就通過設置z-index屬性來控制元素的層級順序實現想要的效果。在實際應用中相對定位很少單獨使用，相對定位一般作為祖先元素的定位，從而輔助設置其子孫元素的絕對定位。

3 DIV+CSS布局要注意的問題

頁面的整體布局一般都采用標準流方式，當頁面中有多個塊元素要在一行顯示時，可通過浮動布局和定位布局來實現，采用浮動布局，要注意清除對后面元素的影響，定位布局通常設置祖先元素的相對定位作為參考對象，即祖先元素必須擁有定位position屬性，屬性值為relative或absolute，其次要設置絕對定位的坐標值，參考點是祖先元素4個頂點中的任意一點，只能設置兩個值即水平方向：left或right;垂直方向：top或bottom。

4 結語

使用DIV+CSS布局可以完美地實現結構、表現的分離，DIV的主要作用是把頁面分割成一個個區域，然后運用標準布局、浮動布局、定位布局三種布局方式實現頁面的結構，CSS對設置每一個區域的樣式以及區域內網頁元素的樣式。DIV+CSS的布局方式使得網頁的開發速度、執行效率以及代碼的可讀性都有了很大的提高，但如果要熟練的運用DIV+CSS的布局完整頁面需要不停的學習和積累經驗。

參考文獻：

[1]李居蘭.談網頁設計常用的布局方法[J].計算機產品與流通，2019（11）：253.

[2]黃楚鵬.基于CSS頁面布局的網頁設計[J].電腦知識與技術，2017，13（04）：45+55.

[3]雷燁.運用DIV+CSS技術對網頁進行布局[J].電腦知識與技術，2016，12（07）：212-213.