利用Div+CSS布局網(wǎng)

3、下面簡單介紹幾種常見的網(wǎng)頁布局形式。10.2.1兩列布局圖10.1是一個典型的兩列布局頁面，這樣的頁面通常是：一列較寬，用于展示頁面主要內(nèi)容；一列較窄，用于放置公告板、用戶登陸框、目錄等信息。10.2.2三列布局圖10.2所示為一個典型的三列布局頁面，這種布局方式主要出現(xiàn)在網(wǎng)站的首頁或頻道頁。10.2.3多列布局搜狐網(wǎng)是一個很有名的門戶網(wǎng)站，該網(wǎng)站經(jīng)營綜合性業(yè)務(wù)、社區(qū)、無線等增值性服務(wù)。圖10.3為該網(wǎng)站的首頁截圖。由于網(wǎng)站的信息量比較大，要呈現(xiàn)的信息種類很多，因此采用四列布局，可以使網(wǎng)站結(jié)構(gòu)看起來更加清晰。10.3利用Div+CSS布局網(wǎng)頁Div標簽作為頁面元素的主要容器，

4、可容納所有子Div標簽、圖像和文字等內(nèi)容，并根據(jù)具體需要對各子Div標簽和對象進行格式化。讀者要能靈活掌握Div+CSS準確定位頁面元素的排版技術(shù)，創(chuàng)建布局合理、美觀的網(wǎng)頁。10.3.1使用Div+CSS搭建頁面通常用Div標簽來定義網(wǎng)頁上的一個特定的區(qū)域，將文字、圖片和表格等網(wǎng)頁元素放到此區(qū)域中，再用CSS對該Div標簽定義的區(qū)域進行定位和樣式的設(shè)置。CSS樣式表不僅是定義頁面樣式的最佳工具，同時也具有精確地定位獨享的控制能力，因此，它成為不可多得的網(wǎng)頁布局工具。為了提高設(shè)計效率，可以事先定義好布局所需的CSS樣式規(guī)則，然后在“插入Div標簽”對話框中應(yīng)用。使用這種方法排版

5、的網(wǎng)頁中的代碼簡潔且更新方便，更能兼容更多的瀏覽器。1．CSS的盒子模式2．Div+CSS布局操作方法10.3.3Div+CSS標準的優(yōu)點使用Div+CSS布局網(wǎng)頁已經(jīng)成為一種潮流，下面是使用Div+CSS標準的優(yōu)點。符合W3C標準。W3C標準是現(xiàn)在主流的標準，這樣可以保證網(wǎng)站不會因為網(wǎng)絡(luò)的升級而慘遭淘汰。結(jié)構(gòu)清晰，容易被搜索引擎搜索到，并能夠優(yōu)化搜索引擎。有很強的易用性，可以進行一次設(shè)計后，在其他地方發(fā)布。支持瀏覽器的向后兼容，幾乎在所有的瀏覽器上都可以使用。表現(xiàn)和內(nèi)容分離。這是使用CSS布局的特色所在，網(wǎng)頁有許多內(nèi)容，而將網(wǎng)頁設(shè)計部分剝離出來放在一個獨立的樣式文件中，代碼

6、會更加簡潔，頁面和樣式可以方便地進行更新，也能大大提高網(wǎng)頁下載速度。在使用表格布局時，會產(chǎn)生很多垃圾代碼，并且一些修飾的樣式及布局的代碼混合在一起。相比之下，Div更著重體現(xiàn)樣式和結(jié)構(gòu)相分離，因此結(jié)構(gòu)的重構(gòu)性強。10.4本章小結(jié)當(dāng)