用div+css布局網頁

陳 焜 / 湖北職業技術學院

用div+css布局網頁

陳 焜 / 湖北職業技術學院

本文介紹了網頁設計中常用的布局方法，重點介紹了DIV和CSS的應用規則和利弊，并結合實例探討了DIV+CSS布局技術在網頁設計中的應用。

DIV ；CSS； 網頁

1.引言

隨著各種的網站制作技術的風起云涌，利用DIV+CSS的設計方式也逐步稱為網站的主力軍之一，DIV及CSS作為制作網頁的重要組成部分，已經成為網頁設計中必不可少的要素。本文將對使用DIV+CSS技術制作網頁方法和利弊進行闡述。

2.DIV+CSS布局方法

2.1 DIV+CSS 盒模型

盒模型將頁面中的每個元素看做一個矩形框，這個框由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。網頁就是由許多個盒子通過不同的排列方式（縱向排列、橫向排列和嵌套排列）堆積而成。

2.2 DIV+CSS 定位

定位是網頁布局的最重要的技術，CSS定位通過 position 屬性的值實現，屬性值有以下 4 種，分別為：static、relative、absolute、fixed[1]。static:靜態定位，為默認值，為無特殊定位，對象遵循HTML 定位規則，此時盒子按照普通布局在頁面上顯示。relative:相對定位，使用該屬性值時盒子仍然是普通布局，占據它所在的位置，在計算定位的時候，才通過 left,right,top,bottom 等屬性，讓這個盒子相對于它的原始起點進行移動后顯示。absolute:絕對定位，絕對定位的盒子的位置相對于最接近的一個具有定位屬性的父塊進行的，如果沒有已定位的父塊，則相對于 body對象，即瀏覽器窗口。

2.3 盒子浮動

用盒子浮動技術，能使盒子脫離文檔流向左或向右移動，排列方式多樣，布局靈活方便。浮動的元素會生成一個塊級框，它可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。盒子浮動通過設置 float 屬性值實現，屬性值有以下 3 種：none、left、right.其中 none 表示不浮動；left 表示浮在左邊；right 表示浮在右邊。有時，浮動使用不當會導致頁面出現錯位的情況，這時可以使用清除浮動的方法。清除浮動通過設置 clear 屬性值實現。

3.DIV+CSS的優缺點

3.1 DIV+CSS有以下優點[2]。

3.1.1 網頁載入比較快，由于DIV+CSS中的CSS富含豐富的樣式，失望也定位和表現更加靈活。

3.1.2 頁面內容與樣式分離可以是網頁代碼減少，使頁面的樣式的調整變得更加方便。

3.1.3 表現和結構分離，在團隊開發中更容易分工合作而減少相互關聯性。

3.2 DIV+CSS缺點：

3.2.1 DIV+CSS到現在還沒有實現所有瀏覽器的統一兼容，使得設計變得更復雜。

3.2.2 DIV+CSS比TABLE定位復雜得多，多層嵌套的DIV會嚴重影響網頁代碼的可閱讀性，對于網頁設計高手也很容易出現問題，更不要說初學者了。

4.實例

制作如圖所示的兩列排版方式的網頁效果：

操作步驟如下：

①首先，根據網頁內容制作各個div塊，其中id為container的是最外層的div塊，里面包括top（標題廣告區）、leftnav（左菜單導向區）、content（主要內容區）以及footer（頁腳區）4個區域

②然后，在各個區域中加入一些內容：

③最后定義各個區域的樣式表：外圍框元素container的寬度是整個屏幕寬的90%，設置左右邊距是auto使它居中對齊，并且加上背景色和邊框線，定義網頁內容的字體顏色和行高：

設置標題廣告區top的背景顏色、間距及底線，并清除h1元素的默認間距和邊距值。設置左菜單導向區的寬度、間距和邊距，并且進行左排列，然后重新設置其中p元素的間距和邊距值：

設置主要內容區，為了空出左菜單導向區，設置左邊距為200px，并且加一條左邊框線，然后設置其允許的最大寬度、間距及其中h2元素的間距和邊距值。設置頁腳區，首先必須清除上述設置的左排列clear:both，然后設置其間距、邊距、背景色及上框線等，完成操作。限于篇幅這里不列出源代碼。

[1] 雷燁.運用DIV+CSS技術對網頁進行布局[J].電腦知識與技術，2016,7.

[2] 吳以欣，陳小寧.動態網頁設計與制作[M].人民郵電出版社，2013,2.