DIV+CSS布局

標籤：div布局   css   

頁面配置一般有三種方式：

1. 表格布局
2. 架構布局
3. DIV+CSS布局

其中，DIV+CSS布局符合W3C標準，目前已成為網頁布局主流。

   <div>標籤的主要作用是用於設定文字、圖片、表格等的擺放位置。當把文字，圖片等放在<div>標籤中時，該標籤被稱為“DIV塊”或“DIV元素”或“DIV層”。 

使用CSS和DIV可以很好的解決映像或文字定位的難題，通過DIV和CSS結合使用，網頁設計人員可以精確的設定內容的位置，還可以將定位的內容上下疊放。 使用DIV+CSS布局，可先先將頁面內容的語義或結構確定下來而不是先考慮外觀。 一個結構良好的XHTML頁面可以通過CSS以任意外觀表現出來。 CSS布局能實現真正意義上的結構和外觀的分離，與傳統的TABLE網頁布局相比，具有以下4個顯著優勢：

1、表現和內容相分離。將設計部分剝離出來放在一個獨立樣式檔案中，XHTML檔案中只存放文本資訊。
2、提高搜尋引擎對網頁的索引效率。用只包含結構化內容的XHTML代替嵌套的標籤，搜尋引擎將更有效地搜尋到你的網頁內容，並可能給你一個較高的評價。

3、提高頁面瀏覽速度。對於同一個頁面視覺效果，採用DIV+CSS重構的頁面容量要比TABLE編碼的分頁檔容量小得多，前者一般只有後者的1/2大小。給使用者最直觀的體驗就是網頁開啟速度快了很多，能給使用者更好的體驗。
4、易於維護和改版。你只要簡單的修改幾個CSS檔案就可以重新設計整個網站的頁面。   

 利用DIV和CSS的定位技術進行網頁的布局是現在主流的頁面配置模式，是TABLE頁面配置的替代技術。採用CSS+DIV布局的頁面容量要比用TABLE布局的分頁檔小很多，前者一般只有後者的1/2大小，節省了大量的頻寬，同時降低了網站改版的成本。W3C組織提供對CSS代碼的驗證服務，地址在：
http://jigsaw.w3.org/css-validator/