【摘要】2019年10月，第六屆世界互聯(lián)網(wǎng)大會在中國浙江烏鎮(zhèn)召開，來自世界各地的政府代表、互聯(lián)網(wǎng)企業(yè)領(lǐng)軍人物、專家學(xué)者等1500余名嘉賓出席大會。人們通過網(wǎng)頁獲取大量的信息，布局合理、設(shè)計(jì)精美的網(wǎng)頁越來越受用戶的青睞。

【關(guān)鍵詞】網(wǎng)頁布局;DIV+CSS

網(wǎng)頁是互聯(lián)網(wǎng)的重要信息載體，人們使用網(wǎng)頁獲取信息大大促進(jìn)了網(wǎng)頁設(shè)計(jì)的發(fā)展。精美的網(wǎng)頁不僅需要內(nèi)容精益求精，也要對內(nèi)容進(jìn)行合理有效的視覺編排。這就需要網(wǎng)頁設(shè)計(jì)人員不僅要能夠熟練地使用軟件，還要對網(wǎng)頁的布局知識進(jìn)行深入的學(xué)習(xí)，從而掌握網(wǎng)頁設(shè)計(jì)布局的技巧。

1. 關(guān)鍵技術(shù)

1.1 HTML5

HTML5是萬維網(wǎng)的核心語言，它是萬維網(wǎng)聯(lián)盟在2014年完成的第五次重大修改后發(fā)布的超文本標(biāo)記語言（HTML）。HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)、更短的啟動時間、更快的聯(lián)網(wǎng)速度、更開放的應(yīng)用接口和更豐富的多媒體支持，它的技術(shù)優(yōu)勢更多的體現(xiàn)在移動設(shè)備網(wǎng)頁的設(shè)計(jì)與開發(fā)上。

1.2 DIV

DIV全稱Division，即劃分，也可以稱其為圖層，它是HTML中指定的，專門用于布局設(shè)計(jì)的容器對象，可以容納其他網(wǎng)頁元素。

1.3 CSS

CSS全稱Cascading Style Sheets，層疊樣式表，完全有別于傳統(tǒng)的布局方式，可以實(shí)現(xiàn)網(wǎng)頁表現(xiàn)和內(nèi)容分類。

CSS是控制網(wǎng)頁布局樣式的基礎(chǔ)，將頁面的內(nèi)容與表現(xiàn)形式分離。網(wǎng)頁中由HTML組織網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，而通過CSS來決定頁面的表現(xiàn)形式，將設(shè)計(jì)部分剝離出來放在一個獨(dú)立樣式文件中。這樣的頁面對搜索引擎更加友好。

1.4 DIV+CSS布局技術(shù)

DIV+CSS布局技術(shù)是當(dāng)下最流行的網(wǎng)頁布局技術(shù)。DIV標(biāo)記將頁面分塊，然后在各個塊中添加相應(yīng)的內(nèi)容，最后使用CSS定位對各塊定位。通過DIV+CSS布局頁面，網(wǎng)頁中的文本、圖片等定位精確，更新方便，易于后期維護(hù)，受到廣大網(wǎng)站管理人員的青睞。

2. 常見網(wǎng)頁布局方式

2.1 內(nèi)容居中布局設(shè)計(jì)

居中布局的設(shè)計(jì)目前在網(wǎng)頁中的應(yīng)用非常廣泛，所以如何在CSS中讓設(shè)計(jì)居中顯示是大多數(shù)開發(fā)人員首先要學(xué)習(xí)的重點(diǎn)之一。居中布局設(shè)計(jì)主要有以下兩個方法：

2.1.1 使用自動空白邊讓設(shè)計(jì)居中

父層DIV的ID設(shè)置為“box”，水平居中，只需定義Div的寬度，然后將水平空白邊設(shè)置為auto，其代碼如下所示：

#box{width：720px; margin：0 auto; }

此設(shè)置方法是網(wǎng)頁中最常用的居中設(shè)置方法，所有瀏覽器中均有效。但是IE5.X或低版本的瀏覽器并不支持自動空白邊。因此，需要將text-align屬性設(shè)置為left，其CSS代碼如下：

body{text-align：center;}

#box{width：720px; height：600px; margin：0 auto; text-align：left; }

2.1.2 使用定位和負(fù)值空白邊讓設(shè)計(jì)居中

頁面中定義容器的寬度，將容器的position屬性設(shè)置為relative，再將left屬性設(shè)置為50%，就會把容器的左邊緣定位在頁面的中間，代碼如下：

#box{width：720px; position：relative; left：50%;}

如果希望容器中間居中，只要設(shè)置容器左邊負(fù)值的空白邊，寬度為容器寬度的一半，代碼如下：

#box{width：720px; position：relative; left：50%; margin-left：-360px;}

2.2 浮動布局設(shè)計(jì)

浮動布局設(shè)計(jì)在網(wǎng)頁制作中起著非常重要的作用，也是最常見的一種布局方式，浮動布局設(shè)計(jì)又可分為多種形式。

2.2.1 兩列固定寬度布局

設(shè)置id名為left與right的Div，兩個div并排顯示，代碼如下：

#left，#right {width：300px; border：2px solid #06F;float：left;}

2.2.2 兩列固定寬度居中布局

兩列固定寬度居中布局可以用一個居中的Div作為容器，將兩列分欄的另兩個Div放置在容器中。CSS代碼如下：

#box{width：608px; margin：0 auto;}

#left，#right {width：300px; height：300px; float：left;}

一個對象的真實(shí)寬度是由本身的寬、左右外邊距、左右邊框和內(nèi)邊距等屬性相加而成，所以box的寬度設(shè)為608px。

2.2.3 兩列寬度自適應(yīng)布局

網(wǎng)頁自適應(yīng)主要通過寬度的百分比值設(shè)置，如，將左欄寬度設(shè)置為30%，右欄寬度設(shè)置為60%，代碼如下：

#left{width：30%;float：left;}

#right{width：60%;float：left;}

2.2.4 兩列右列寬度自適應(yīng)布局

在實(shí)際應(yīng)用中，有時需要左欄固定寬度，右欄根據(jù)瀏覽器窗口的大小自動適應(yīng)。則需要在CSS中設(shè)置左欄寬度，右欄不設(shè)置寬度、浮動，代碼如下：

#left{width：200px;float：left;}

2.2.5 三列浮動中間列寬度自適應(yīng)布局

三列布局時，中間列寬度自適應(yīng)布局，則設(shè)置左欄固定寬度居左顯示，右欄固定寬度居右顯示，中間欄根據(jù)左右欄的間距變化自動適應(yīng)。單純地使用float屬性與百分比屬性不能實(shí)現(xiàn)此類布局，需要設(shè)置絕對定位。絕對定位后的對象，不需要考慮它在頁面中的浮動關(guān)系。

首先設(shè)置絕對定位控制左列與右列的位置：

body{margin：0px;}

#left{width：300px; position：absolute; top：2px; left：1px;}

#right{width：300px; position：absolute; top：0px; right：0px;}

中列設(shè)置如下：

#main{ margin：0 auto; margin：0px 304px 0px3 04px;}

只需要將main的左邊和右邊的邊距固定保持left和right的寬度，便實(shí)現(xiàn)了兩邊各讓出304px的自適應(yīng)寬度，不需要再設(shè)定浮動方式，就可實(shí)現(xiàn)布局的要求。

2.3 高度自適應(yīng)布局

高度值同樣也可實(shí)現(xiàn)自適應(yīng)布局， CSS代碼如下：

html，body{margin：0px; height：100%;}

#left{width：300px;height：100%; position：absolute;float：left;}

值得注意的是需要將left、html、body的高都設(shè)為100%，這是基于瀏覽器解析規(guī)則引發(fā)的高度自適應(yīng)問題。

3. 結(jié)語

DIV+CSS的網(wǎng)頁布局技術(shù)真正實(shí)現(xiàn)了頁面內(nèi)容與表現(xiàn)形式的分離，大到各大門戶網(wǎng)站，小到不計(jì)其數(shù)的個人網(wǎng)站，都使用在Div+CSS布局網(wǎng)頁。學(xué)習(xí)和使用DIV+CSS技術(shù)布局網(wǎng)頁十分必要。

作者簡介：田君，內(nèi)蒙古人，從事數(shù)據(jù)庫管理、網(wǎng)頁設(shè)計(jì)等方面的教學(xué)與研究工作。