Div在網(wǎng)頁布局技術(shù)中的應(yīng)用

2013-12-31 00:00:00劉暢

消費(fèi)電子·下半月 2013年11期

摘要：網(wǎng)頁設(shè)計(jì)領(lǐng)域的新技術(shù)日新月異，發(fā)展迅速。HTML5+CSS3標(biāo)準(zhǔn)的正式提出，使得網(wǎng)頁設(shè)計(jì)邁入了嶄新時(shí)代，目前網(wǎng)頁布局中最流行的是CSS+Div技術(shù)。本文主要介紹了Div標(biāo)簽在網(wǎng)頁布局中的應(yīng)用，通過它可以輕易將頁面元素定位在頁面的任意位置。

關(guān)鍵詞：Div；CSS；網(wǎng)頁布局

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1674-7712 （2013） 22-0000-01

一、網(wǎng)頁布局工具的比較

網(wǎng)頁前臺(tái)界面設(shè)計(jì)通常有3種布局技術(shù)，每種布局方式都有其特點(diǎn)。

（一）表格布局：是目前網(wǎng)頁中使用比例最高的布局方式，其出現(xiàn)最早，技術(shù)成熟，簡(jiǎn)單且容易上手，是初學(xué)者最容易接受的布局方式。表格在定位圖片和文本方面有很大優(yōu)勢(shì)，且瀏覽器兼容性良好。表格布局唯一的缺點(diǎn)是，層層嵌套的表格會(huì)使網(wǎng)頁結(jié)構(gòu)混亂，其線性加載的特征使網(wǎng)頁打開的速度變慢。

（二）框架布局：是使用嵌套網(wǎng)頁的布局技術(shù)。隨著時(shí)間的發(fā)展，框架布局由于瀏覽器的支持性差，銀鏡組件退出網(wǎng)頁設(shè)計(jì)的歷史舞臺(tái)。

（三）CSS+Div布局：在HTML4.0標(biāo)準(zhǔn)中，CSS和Div等標(biāo)簽配合使用，真正實(shí)現(xiàn)了網(wǎng)頁內(nèi)容和形式的分離，這種布局方式相對(duì)復(fù)雜，但其網(wǎng)頁代碼的規(guī)整和網(wǎng)頁加載熟讀的優(yōu)化是任何其他布局方式無法比擬的。目前，衡量一個(gè)網(wǎng)站是否優(yōu)秀，主要標(biāo)準(zhǔn)是該布局方式的使用，網(wǎng)頁設(shè)計(jì)的核心是CSS+Div技術(shù)的使用，在CSS+Div不居中，Div標(biāo)簽主要用來裝載網(wǎng)頁中的內(nèi)容，其外觀與形式完全由CSS進(jìn)行控制，由此實(shí)現(xiàn)了網(wǎng)頁內(nèi)容與形式的分離，使網(wǎng)頁代碼更加規(guī)范、有序。

二、Div標(biāo)簽

Div標(biāo)簽是重要的HTML標(biāo)簽，它類似一個(gè)容器，裝載了HTML文檔中大塊內(nèi)容，并定義了其位置和樣式，Div標(biāo)簽又稱為區(qū)塊標(biāo)簽。碎葉網(wǎng)頁設(shè)計(jì)技術(shù)日新月異，軟件的不斷升級(jí)，層技術(shù)得到了進(jìn)一步的發(fā)展，CSS+Div技術(shù)已經(jīng)稱為網(wǎng)頁布局技術(shù)的主流。

可以使用Div標(biāo)簽創(chuàng)建CSS布局塊并在文檔中對(duì)CSS布局塊進(jìn)行定位。Div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由Div標(biāo)簽的屬性來控制，或者通過使用CSS樣式表控制。Div標(biāo)簽的基本格式為：

content

其中，property是屬性，value是該屬性的值，在CSS2.0標(biāo)準(zhǔn)中，Div標(biāo)簽的屬性是其樣式，如Class、ID，對(duì)于Div標(biāo)簽外觀的控制通過CSS樣式表實(shí)現(xiàn)。

三、盒子模型

盒子模型（Box Model）用于描述一個(gè)為HTML元素形成的矩形盒子。盒子模型還涉及為各個(gè)元素調(diào)整外邊距（margin）、邊框（border）、內(nèi)邊框（padding）和內(nèi)容（content）的具體操作。盒子模型的結(jié)構(gòu)如下圖所示：

盒子模型實(shí)例的部分CSS代碼如下：

#title{

margin：10px 200px 10px 20px；

Padding：10px；

border：1px；

}

#content{

margin：4px 30px 4px 30px；

Padding：0px 0px 0px 30px；

border：0px；

}

…