原作者：macro(原名陳邦宏)
<div class="dorado-layout-container"> <div class=" dorado-layout-header">top</div> <div class=" dorado-layout-body"> <div class=" dorado-layout-sidebar">left</div> <div class=" dorado-layout-content">center</div> <div class=" dorado-layout-sidebar">right</div> </div> <div class=" dorado-layout-footer">footer</div> </div>
.dorado-layout-container{ 
width:300px; height:200px; border:1px solid gray; 
} .dorado-layout-header{ height:40px; padding:10px; border-bottom:1px solid gray; } .dorado-layout-body{ clear:both; width:100%; height:100%; } .dorado-layout-sidebar{ float:left; width:10%;height:100%;border-right:1px solid gray; } .dorado-layout-content{ float:left; width:68%;height:100%; } .dorado-layout-footer{ height:40px; padding:10px; clear:both; width:100%;border-top:1px solid gray; } 在使用DIV+CSS進行佈局重構的時候，可以說是我對網頁佈局觀念的不斷轉變以及對web標準認識不斷加深的過程，也是對CSS技術靈活運用逐步熟練的過程。起初對CSS的一些佈局屬性不是很熟，感覺使用DIV進行佈局比傳統採用TABLE要麻煩許多，幾乎達到放棄的地步，不過值得慶幸的是目前採用DIV+CSS已經成爲一種趨勢，因此網上相關的資料非常的豐富，解決了我所遇到的各種問題，比如如何實現DIV高度和寬度的自適應， 如何做到CSS的佈局在不同瀏覽器的兼容等等，這些問題都可以通過google找到相關的答案。要得到理想的佈局效果，一個合適的編輯器也是我們必備的利器之一。由於本人長期使用EditPlus編輯各種文本文件，因此成了首選，不過目前最新的Web設計工具Dreamweaver8已經實現了對CSS佈局的可視化，相信會成爲大家的最愛。
下面是我在進行佈局重構的時候認爲比較重要的幾個觀念和要點。
1、在CSS中涉及到佈局方面主要是float，overflow，clear，display，padding，margin以及position幾個屬性，我們必須對它們各自的作用，以及不同的屬性值的意義做到“爛熟於胸”，否則佈局工作將是一件非常痛苦的事情。因此本人強烈推薦蘇沈小雨編著的《CSS2手冊》，該文檔也應該成爲每個使用DIV+CSS進行佈局的開發人員的“葵花寶典”。
2、對CSS盒模式的理解，下面的示意圖對於我們進行合適的佈局非常有幫助，特別是在進行細微的佈局調整方面。 
3、不論是使用DIV還是TABLE進行佈局，儘量減少嵌套層次。當使用了太多的嵌套層次之後，瀏覽器進行解析的時候將會得到全部的內容才能做顯示，而使用儘可能少的嵌套div則可以做到邊接收邊顯示（TABLE則需要完全取得整個表格中的內容才能做顯示），這樣可以加快顯示速度。
4、在對class和id名稱進行定義的時候儘量與內容結構相關，而不是與佈局、表現相關。否則在佈局發生改變之後，就會造成class或者id的名字跟它自己的表現形式不符，造成理解上的困難，對於頁面內容旁邊的side bar區域不要定義成leftBar，而應該根據內容定義成titleBar或者hotBar之類的名字，這樣在佈局發生改變的時候不會到該名字的繼續使用。
5、使用XHML的語義元素來定義頁面中的內容結構，比如用<h1><h2>這樣的元素來定義各種標題結構的內容，用<ul><li>來定義各種條目結構的內容，用<table>來定義表格結構的內容。
6、在使用DIV，SPAN塊狀元素進行佈局重構的時候還有一點需要特別注意，當我們以前採用TABLE進行佈局的時候，TABLE在佈局前會拿到所有的內容，然後會根據各個部分內容以及每塊的佈局設置來進行“通盤”考慮，然後重新計算最終的佈局結構，塊狀元素則比較“自私”，缺少一種“全局”觀念，它僅僅關心自己的佈局，至於它前後左右是如何佈局則不管，而這個工作則需要設計者來決定，當然我們也可以通過一些佈局技巧來提高塊狀元素的“全局”素養，當做到這一步的時候，採用DIV+CSS進行佈局將會變成一件非常輕鬆的事情！