DIV+CSS技術在網頁布局中的應用實現

李雙遠，李阿輝

(吉林化工學院信息中心，吉林吉林132022)

DIV全稱division意為“區塊、分割”，DIV標簽是一個無意義的容器標簽，用于將頁面劃分出不同的區域.通過DIV將復雜的頁面進行細分塊，可以將問題細分一個一個解決，所以通過DIV將頁面分塊是一個關鍵的工作，也是決定最終效果與質量的前提.

CSS(Cascading Style Sheet)，中文翻譯為層疊樣式表，是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言.CSS的引入就是為了使得HTML語言能夠更好地適應頁面的美工設計并且隨即引發了網頁設計的潮流，使用CSS設計的優秀頁面層出不窮［1-3］.

1 CCS樣式的基礎應用

1.1 CSS控制頁面的方式

·行內樣式

＜div style="屬性1:值1;屬性2:值2;"＞＜/div＞

行內樣式一般用于需要單獨控制的元素，因為行內樣式的優先級是最高的.

·嵌入樣式

＜style type="text/css"＞

選擇器{屬性1:值1;屬性2:值2;}

＜/style＞

嵌入樣式一般是直接寫在html文檔頭部的一種樣式，為了文檔的整潔性和易于控制操作性，當需要寫大量樣式代碼的時候，是不用嵌入樣式的.

·外部樣式

＜link rel="stylesheet"type="text/css"href="url"＞

這段代碼是放在html文檔頭部的，用于調用外部的樣式.前面兩種樣式我們一般都不用于有大量樣式代碼的情況，那么這種方式當選最為合適.

·導入樣式

@import url(外部樣式表位置);

·優先級別:

-行內樣式表＞其他的樣式表

-其他的樣式表，優先級一樣，按照導入的順序來確定他們是否起

作用.

1.2 CSS 選擇器

CSS控制樣式，那么CSS是怎么控制到元素的呢?這點正是因為CSS具有強大且眾多的CSS選擇器，也正是因為擁有眾多選擇器，CSS才能夠運用自如的承載樣式.下面是CSS所擁有的選擇器:

·id選擇器

-#idname

·類選擇器

-.classname

·標簽選擇器

-tagname

·交叉選擇器

-tagname.classname tagname#idname

·群組選擇器

-多個選擇器用 “，”隔開

·后代選擇器(包含選擇器)

-父級和子級用空格隔開

·通用選擇器

-*{}

·子選擇器

-子選擇器用于選中元素的直接后代(即兒子)，它的定義符

號是大于號(＞)

body＞p{color:green;}

·相鄰選擇器

-相鄰選擇器的定義符號是加號(+)，相鄰選擇器將選中緊

跟在它后面的一個兄弟元素(這兩個元素具有共同的父元素)

h2+p{color:red;}

·屬性選擇器

-匹配屬性

a［name］{color:purple;}

div［border］{border-color:gray;}

2 DIV+CSS布局優勢

目前電子商務網站發展很快，也推進了網頁布局的發展，對布局的要求更加專業化，規范化，相比表格頁面，DIV+CSS有明顯的優勢.那么在介紹DIV+CSS與表格布局所擁有的優勢之前，首先分別用表格和DIV+CSS來簡單模擬這樣的效果:五個大小全為200pxX300px的塊，并且這五個塊中字體的顏色全為紫色，大小為14px.

2.1 用表格來實現

＜html＞

＜head＞＜title＞表格頁面＜/title＞

＜/head＞

＜body＞

＜table width="200"height="300"border=＇0＇

cellpadding= ＇0＇cellspacing= ＇0＇＞

＜tr width="200"height="300"＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體1＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體2＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體3＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體4＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體5＜ /font＞ ＜ /td＞

＜/tr＞

＜/table＞

＜/body＞

＜/html＞

2.2 用DIV+CSS來布局

＜html＞

＜head＞

＜title＞DIV+CSS頁面＜/title＞

＜style type="text/css"＞

div{

padding:0px;

margin:0px;

width:200px;

height:300px;

color:purple;

font-size:14px;

float:left;

}

＜/style＞

＜/head＞

＜body＞

＜div＞塊中字體1＜/div＞

＜div＞塊中字體2＜/div＞

＜div＞塊中字體3＜/div＞

＜div＞塊中字體4＜/div＞

＜div＞塊中字體5＜/div＞

＜/body＞

＜/html＞

2.3 比較總結

從上面的代碼比較可以看出，用表格來實現上面的效果代碼是多冗余的.首先5個塊表格需要設置5次寬高，實現字體的顏色，也要對每個字體加已經不常用的font標簽，并且還得重復寫5次.那么，如果一個大商城有幾十甚至上百個樣式相同的內容，用表格還重復寫幾十遍到上百遍?此時CSS樣式的高效率、易于維護、加載速度快等優勢便淋漓盡致的展現出來.還有其中想要字體的大小是14px，然而font元素不具有這樣具體像素大小的屬性，這樣字體的大小也不是很順我們意的實現.那么我們可以總結出DIV+CSS布局的一下優勢:

(1)彌補html標簽的功能缺陷，可以使頁面的美工上升一個高度.

(2)加載速度快，節省更多流量.雖然表面上看加載一次并節省不了多少流量，但是當你的頁面被加載10000次呢?節省流量可想而知.

(3)便于維護和管理，節省大量的人力和成本.一個頁面不可能一直不變，當想對一個頁面做一些更改的時候，如果是表格布局的話就會很讓人頭疼，大量的冗余代碼需要一一更改.然而CSS只需要修改一下樣式便可.

(4)頁面結構清晰，頁面內容和表現分離.外部樣式單獨存在于一個文件中，互不影響.

另外DIV+CSS布局對搜索引擎更加友好，更有利于抓取和收取您的頁面.

3 DIV+CSS技術在網頁布局中的應用實現

在前面我們已經敘述了CSS樣式的基本應用.那么在網頁布局中表格或其他塊都具備內容(content)、填充(padding)、邊框(border)、邊界(margin)等基本屬性，一個CSS盒子也具備這些屬性，盒子模型表達的很清楚.我們下面將用一個實例來闡述DIV+CSS在網頁中具體應用實現方法.

DIV+CSS設計實例圖

圖中運用的div+css技術:

(1)網頁居中，運用css中margin:0 auto;控制即可以使網頁居中，方便快捷.

(2)滑動門技術，體現了css的強大功能.采用css+js和純css技術均能實現，這里用純css來實現滑動門技術.

CSS代碼:

#nav{

width:303px;

height:200px;

border:1px solid#CCCCCC;

}

#column a{

float:left;

width:100px;

border-right:1px solid#CCC;

border-bottom:1px solid#CCC;

font:bold 14px/30px Arial，Helvetica，sans-serif;

color:#000;

text-decoration:none;

text-align:center;

}

#contant{

width:303px;

height:162px;

overflow:hidden;

}

ul{

margin:0;

padding:0;

list-style-type:none;

padding:4px 0 0 5px;

}

li{

font-size:12px;

overflow:hidden;

padding-left:2px;

line-height:27px;

}

body內部代碼:

＜div id="nav"＞

＜div id="column"＞ ＜a href="#one"＞企業新聞＜/a＞ ＜a href="#two"＞行業信息＜/a＞ ＜a href="#three" ＞產品介紹 ＜/a＞ ＜/div＞

＜div id="contant"＞

＜ul id="one"＞

＜li＞＜a href="#"＞滑動門1 ＜/a＞＜/li＞

＜li＞＜a href="#"＞滑動門1 ＜/a＞＜/li＞

＜li＞＜a href="#"＞滑動門1 ＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門1 ＜/a＞＜/li＞＜/ul＞＜ul id="two"＞＜li＞＜a href="#"＞滑動門2＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門2＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門2＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門2 ＜/a＞＜/li＞＜/ul＞＜ul id="three"＞＜li＞＜a href="#"＞滑動門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動門3＜/a＞＜/li＞＜/ul＞＜/div＞＜/div＞

(3)圖中錯綜復雜的框架，運用css樣式來實現比表格的嵌套簡單方便很多，上面已經比較過.

(4)輪播圖，運用css+js技術來實現.電子商務網站中都已經離不開輪播圖的效果，直觀的動態效果，多張圖片組合，具有很強的視覺沖擊，從而吸引訪問者.在這里可以看出css+div技術不僅單獨制作網頁，而且可以兼容其他網頁技術，豐富了建站技術及內容，使頁面載入更快;可以降低網站流量費用;設計師在設計時和修改時更有效率，而代價更低;使整個站點保持視覺的一致性.使用CSS的DIV排版方式使得數據與CSS文件完全分離，美工修改頁面時不需要關心后臺任何操作問題，而表格依賴各個單元格，美工必須在大量后臺代碼中尋找排版方式

4 結 論

DIV+CSS是web標準，目前廣泛的應用也順應發展潮流.與傳統的布局方式相比，DIV+CSS技術優勢十分明顯，我們在利用DIV+CSS技術開發網頁時也能感覺到它在網頁布局中的魅力所在.對于網頁在美工上的表現技術又跨了一大步.

［1］ 杜靜.敖富江.Web編程入門經典:HTML、XHTML和 CSS［M］.北京:清華大學出版社，2010.

［2］ (美)奧利弗，(美)莫里森.HTML與CSS入門經典［M］.7版.北京:人民郵電出版社，2007.

［3］ 金峰.變幻之美-DivCSS網頁布局揭秘-案例實戰篇［M］.北京:人民郵電出版社，2009.