淺談CSS+DIV 在網頁設計和布局中的作用

顏春艷 南京技師學院

概述：自從互聯網走入人們的生活以來，網頁設計和制作也隨之誕生和發展，成為各大中專院校計算機專業學生必然開設的課程之一，網頁開發語言和代碼在各大網站上也是層出不窮。目前，比較流行的網頁設計與網頁布局的技術一般都采用的是CSS+DIV。

1 引言

本人擔任網頁制作這門課程的教學已經有幾年的時間了，每學期的教學結束后，都會給我留下一些遺憾，最大感觸是：學生在學習這門課程時，能夠按照教學要求，完成書本上案例的制作，涉及到的文本、圖像、表格、框架、模板、表單等等知識點都能夠掌握的不錯，對于實例也能夠完成較好。但是，當學生一旦不學習這門課程了，讓他制作一個簡單的公司網站都沒有辦法完成，很難達到學以致用的目的。

這不僅引起了我的教學反思，教學哪里出了問題？僅僅學習書本知識已經不能滿足需求？于是，我著手研究該如果解決這樣的現狀。我召集教研組的教師進行教學研討，上網查閱最新資料，了解目前網頁制作的發展方向和主流技術，發現關于網頁的表現和布局傳統的表格布局、框架結構等等已經不再適應需求，往往網頁文件所占空間太大，網頁打開的速度太慢，都已經逐漸不再使用了。目前，比較流行的網頁設計和布局大多采用的是CSS+DIV技術。本文就主要闡述與CSS+DIV相關的知識點。

2. CSS層疊樣式表概述

2.1 CSS概念及功能簡介

CSS是Cascading Style Sheets的縮寫，中文意思是層疊樣式表或級聯樣式表，是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。CSS可以用來精確的控制頁面里每一個元素的字體樣式、背景、排列方式、區域尺寸、邊框等。使用CSS能夠簡化網頁的格式代碼，加快下載顯示的速度，外部鏈接樣式可以同時定義多個頁面，大大減少了重復用勞動的工作量。

2.2 CSS在頁面控制作用方面的三種樣式

2.2.1 行內樣式 。將樣式直接插在html標簽中，這種方式的特點是靈活、簡單方便

2.2.2 嵌入式。將所有樣式放在頭部文件中，這樣一個樣式可以在一個頁面多次應用，更改整個頁面的顯示效果十分方便。

2.2.3 鏈接式。 采用鏈接的形式調入外部的樣式表文件（.CSS），該樣式文件可以為整個網站的多個網頁共同引用，既減少代碼編寫的重復工作，又可以做到統一頁面風格，在需要更新是只需對外部樣式表文件進行更新即可。

在實際使用時，需要根據制作網頁時的具體情況，選擇某種或某幾種適合的樣式設置方式。

2.3 CSS選擇器

CSS選擇器主要包括三種，分別是標記選擇器、類別選擇器和ID選擇器，這也是學習CSS所需掌握的基本語法，下面分別對這三種選擇器作簡要說明。

2.3.1 標記選擇器。這個標記必須是html的標準標記，它的CSS代碼將作用于整個網頁中的該標記。

2.3.2 類別選擇器.class。采用以 .號開頭，后面的class是由用戶自定義的名稱，在需要使用的地方直接應用該樣式即可。

2.3.3 ID選擇器。id的名稱是由用戶自定義的，和類別選擇器不同的是id前面不再是.號，而是#號，語法格式基本相同，區別在于：同一個id名稱是不允許出現在兩個標記中的，這會在JavaScript調用中出現錯誤。

2.4 CSS選擇器的聲明

2.4.1 集體聲明。就是將具有同樣屬性的CSS標記同時進行聲明，各標記之間用逗號隔開即可。

2.4.2 CSS選擇器的嵌套。嵌套意味著一個標記之中嵌套了另一個標記，那么在選擇器對標記發生作用時，將按照嵌套的定義來實現，而對未包含在嵌套內的標記，將不起作用。

2.4.3 CSS的繼承。首先，包含在里面的標記將首先繼承其父親的CSS屬性，然后再結合自己的屬性，如果父親標記包括的屬性在自身標記中有重新設置的，則按照自身的屬性來決定，反之繼承父親的屬性設置。

3 CSS+DIV盒子模型

3.1 CSS中的盒子模型

盒子模型是CSS中非常重要的概念，它主要是用于DIV塊之間與其他塊的關系以及自身塊的關系設置，如圖3-1所示。

圖3-1

其中，藍色部分表示DIV塊，橘色部分的Content表示盒子模型的內容，border和content之間的黃色部分padding表示的是內容和DIV塊邊框之間的距離，最外圍綠色部分的margin表示的是DIV塊與外圍其他塊之間的距離。

通過對盒子模型的padding和margin的設置，可以很好的控制網頁元素之間的距離，包括文字、段落之間的空隙以及段落本身與邊框之間的空隙都可以非常自由的進行控制。

3.2 元素的定位

在了解了盒子模型之后，元素便可以很好的進行定位，接下來我們來學習一下元素的定位。

3.2.1 float定位（浮動）

通過css定義float可以實現將div樣式層塊向左或向右浮動。其值包括 none |left |right，none :對象不浮動；left :對象浮在左邊；right :對象浮在右邊。在這里還需要補充說明一下clear屬性，有時會和float聯合使，用來清除浮動。

3.2.2 position定位

position屬性規定元素的定位類型。其值包括absolute|fixed|relat ive|static|inherit。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。

4 總結

通過學習我們了解到DIV+CSS在網頁設計中不可缺少的地位和作用，包括頁面布局、網頁元素樣式設置等。在今后的學習中，我們將會涉及更多的CSS樣式以及DIV盒子的模型的綜合應用，經過自身的不斷深入學習，將會進一步領略到其中的奧妙，讓我們一起在靜態網頁制作的道路上越走越遠。