三欄布局是目前最常見(jiàn)的網(wǎng)頁(yè)布局，主要頁(yè)內(nèi)容放在中間一欄，邊上的兩欄放置導(dǎo)航鏈接之類(lèi)的內(nèi)容。下面由學(xué)習(xí)啦小編為大家整理的css網(wǎng)頁(yè)布局的方法，希望大家喜歡!

　　css網(wǎng)頁(yè)布局的方法

　　一、基本方法

　　基本的布局包含五個(gè)div，即標(biāo)題、頁(yè)腳和三欄。標(biāo)題和頁(yè)腳占據(jù)整個(gè)頁(yè)寬。左欄div和右欄div都是固定寬度的，并且用float屬性來(lái)把它們擠壓到瀏覽器窗口的左側(cè)和右側(cè)。中欄實(shí)際上占據(jù)了整個(gè)頁(yè)寬，中欄的內(nèi)容在左、右兩欄之間“流淌”。由于中欄div的寬度并不固定，因此它可以根據(jù)瀏覽器窗口的改變進(jìn)行必要的伸縮。中欄div的左側(cè)和右側(cè)的填充(padding)屬性保證內(nèi)容安排在一個(gè)整齊的欄中，甚至當(dāng)它伸展到邊欄(左欄或者右欄)的底端也是這樣。

　　二、三欄布局的一個(gè)例子

　　請(qǐng)看看用本文所介紹的技術(shù)進(jìn)行三欄布局的例子。

　　三、XHTML代碼：

　　Header

　　Port side text...

　　Starboard side text...

　　Middle column text...

　　Footer text...

　　css頁(yè)面布局的代碼

　　一、單行一列

　　body{margin:0px;padding:0px;text-align:center;}

　　#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　二、兩行一列

　　body{margin:0px;padding:0px;text-align:center;}

　　#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　三、三行一列

　　body{margin:0px;padding:0px;text-align:center;}

　　#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　#content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　四、單行兩列

　　#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

　　#bodycenter#dv1{float:left;width:280px;}

　　#bodycenter#dv2{float:right;width:410px;}

　　五、兩行兩列

　　#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

　　#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

　　#bodycenter#dv1{float:left;width:280px;}

　　#bodycenter#dv2{float:right;width:410px;}

　　六、三行兩列

　　#header{width:700px;margin-right:auto;margin-left:auto;}

　　#bodycenter{width:700px;margin-right:auto;margin-left:auto;}

　　#bodycenter#dv1{float:left;width:280px;}

　　#bodycenter#dv2{float:right;width:410px;}

　　#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

　　css頁(yè)面布局有哪些優(yōu)點(diǎn)

　　1、簡(jiǎn)介：為何使用表格排版是不明智的?

　　表格之所以存在于 HTML 中，只是為了一個(gè)目的：顯示表格狀的數(shù)據(jù)。然而此后的 border="0" 使得設(shè)計(jì)師可以將圖片和文本放在這無(wú)形的網(wǎng)格中。迄今為止，表格仍然主導(dǎo)著視覺(jué)豐富的網(wǎng)站的設(shè)計(jì)方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強(qiáng)大的網(wǎng)站設(shè)計(jì)方法。

　　2、概覽：這對(duì)我有什么用處?

　　我們將告訴你這樣一種工作方式，它會(huì)：

　　使你的頁(yè)面載入得更快

　　降低你的流量費(fèi)用

　　讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低

　　幫助你的整個(gè)站點(diǎn)保持視覺(jué)的一致性

　　讓你的站點(diǎn)可以更好地被搜索引擎找到

　　使你的站點(diǎn)對(duì)瀏覽者和瀏覽器更具親和力

　　在世界上越來(lái)越多人采用 Web 標(biāo)準(zhǔn)時(shí)，它還能 提高你的職場(chǎng)競(jìng)爭(zhēng)實(shí)力 (事實(shí)上也就是降低失業(yè)的風(fēng)險(xiǎn))。

　　3、表格帶來(lái)的問(wèn)題

　　把格式數(shù)據(jù)混入你的內(nèi)容中。

　　這使得文件的大小無(wú)謂地變大，而用戶訪問(wèn)每個(gè) 頁(yè)面時(shí)都必須下載一次這樣的格式信息。

　　帶寬并非免費(fèi)。

　　這使得重新設(shè)計(jì)現(xiàn)有的站點(diǎn)和內(nèi)容極為消耗勞力 (且昂貴)。

　　這還使我們保持整個(gè)站點(diǎn)的視覺(jué)的一致性極難，花費(fèi)也極高。

　　基于表格的頁(yè)面還大大降低了它對(duì)殘疾人和用手機(jī)或 PDA 瀏覽者的親和力。

　　4、過(guò)渡性的設(shè)計(jì)

　　使用 margin 和 padding 來(lái)代替多余的表格單元和間隔 GIF。

　　使用 link 和 @import 來(lái)載入樣式。前者用于早期瀏覽器，后者給現(xiàn)在的瀏覽器。

　　5、結(jié)構(gòu)化標(biāo)記：所寫(xiě)即所想，所想即所寫(xiě)

　　即便書(shū)寫(xiě) CSS 很簡(jiǎn)單，使用 CSS 來(lái)排版卻真的需要一種和我們以往有些不同的思維方式。

　　我們排版時(shí)考慮的不是“這個(gè)東西放在這兒，那個(gè)東西放在那兒”，而是頁(yè)面中信息的類(lèi)別和信息的結(jié)構(gòu)。

　　我們用

　　標(biāo)記來(lái)標(biāo)示最重要的頭條;次一級(jí)的條目則用

　　來(lái)標(biāo)記，以此類(lèi)推;而段落則放在

　　標(biāo)記中。

　　這就是我們稱之為“結(jié)構(gòu)標(biāo)記”或“語(yǔ)義標(biāo)記”的東西。

　　你的內(nèi)容將不放在表格和表格元素中，取代它們的是 div 元素。還要給你的 div 元素安排一個(gè) id 或 class，不過(guò)這是為了描述它們的內(nèi)容或功能，而非它們的外觀。