在網(wǎng)頁(yè)設(shè)計(jì)中，樣式布局是非常重要的一部分。CSS和DIV布局是現(xiàn)在最為流行的布局方式。CSS是Cascading Style Sheets的簡(jiǎn)稱，是一種用來(lái)描述HTML或XML等文件外觀顯示的樣式語(yǔ)言。DIV是HTML中的一個(gè)元素，是一種容器，它能夠?qū)?nèi)容和樣式分離，實(shí)現(xiàn)頁(yè)面的結(jié)構(gòu)和布局。

CSS+DIV布局可以實(shí)現(xiàn)靈活、可維護(hù)、可擴(kuò)展的網(wǎng)頁(yè)布局。具體方法就是將HTML文檔的結(jié)構(gòu)和內(nèi)容使用DIV進(jìn)行包裹，然后通過(guò)CSS樣式定義每個(gè)DIV的大小、位置、邊距、背景、字體等屬性。通過(guò)靈活搭配各種DIV容器，可以實(shí)現(xiàn)各種復(fù)雜的頁(yè)面布局設(shè)計(jì)。

<div id="container"><div class="header">頭部?jī)?nèi)容</div><div class="content">中間內(nèi)容</div><div class="sidebar">側(cè)邊欄內(nèi)容</div><div class="footer">底部?jī)?nèi)容</div></div>

如上面的代碼所示，使用DIV元素包裹相應(yīng)的內(nèi)容，其中id為“container”的div表示整個(gè)頁(yè)面的主體部分，而class為“header”、“content”、“sidebar”、“footer”的div則分別表示頁(yè)面的頁(yè)眉、主要內(nèi)容區(qū)、側(cè)邊欄和頁(yè)腳。

在CSS樣式表中，可以為各個(gè)DIV容器定義相應(yīng)的樣式屬性：

#container {width: 960px;margin: 0 auto;}.header, .footer {height: 100px;background: #efefef;}.content {float: left;width: 600px;background: #fff;}.sidebar {float: right;width: 300px;background: #ccc;}

如上面的代碼所示，通過(guò)CSS樣式表定義了id為“container”的DIV容器的寬度為960像素，居中顯示；定義class為“header”和“footer”的DIV容器的高度為100像素，背景色為#efefef；定義class為“content”和“sidebar”的DIV容器分別左右浮動(dòng)，寬度為600像素和300像素，背景色分別為#fff和#ccc。

通過(guò)CSS+DIV布局的方式，可以實(shí)現(xiàn)多種靈活的網(wǎng)頁(yè)布局設(shè)計(jì)，有效地提高頁(yè)面的可維護(hù)性和擴(kuò)展性。同時(shí)，只需簡(jiǎn)單的樣式修改，就能夠改變頁(yè)面的外觀和布局，而不影響其結(jié)構(gòu)和內(nèi)容。