DIV+CSS布局理念

一、CSS布局理念

隨著Web2．0標準化設計理念的普及，國內很多大型門戶網站已經紛紛采用CSS-DIV制作方法，從實際應用情況來看，此種方法絕對好于表格制作頁面的方法。由于CSS富含豐富的樣式，使頁面更加靈活，它可以根據不同的瀏覽器，達到顯示效果的統一和不變形。

二、將頁面用DIV分塊

       無論使用表格還是CSS，網頁布局都是把大塊的內容放進網頁的不同區域里面。CSS排皈是一種很新的排版理念，首先要將頁面使用<div>整體劃分為幾個板塊，然后對各個板塊進行CSS定位，最后在各個板塊中添加相應的內容。
       在利用CSS布局頁面時，首先要把頁面分成幾個模塊，同時注意各個模塊之間的父子關系等。以最簡單的框架為例，頁面由banner(導航條)、主體內容(content)、菜單導航(1inks)和腳注(footer)幾個部分組成，各個部分分別用自己的id來標識，如圖19．1所示。
       其頁面中的HTML框架代碼如下所示。

<div id="container">container　
  <div id="banner">banner</div>
　　<div id="content">content</div>
　　<div id="links">links</div>
　　<div id="footer">footer</div>
　　</div>

例子中每個板塊都是一個<div>，這里直接使用CSS中的id來表示各個板塊，頁面的所有DIV塊都屬于container，一般的DIV排版都會在最外面加上這個父DIV，便于對頁面的整體進行調整。對于每個DIV塊，還可以再加入各種元素或行內元素。

三、設計各塊的位置

當頁面的內容已經確定后，則需要根據內容本身考慮整體的頁面布局類型，如是單欄、雙欄還是三欄等，這里采用的布局如圖所示。

由圖可以看出，在頁面外部有一個整體的框架container，banner位于頁面整體框架中的最上方，content與links位于頁面的中部，其中content占頁面的絕大部分，最下面是頁面的腳注footer。

四、用CSS定位

整理好頁面的框架后，就可以利用CSS對各個板塊進行定位，實現對頁面的整體規劃，然后再往各個板塊中添加內容。
下面首先對body標記與container父塊進行設置，CSS代碼如下所示。

body {
　　margin:20px;　
text-align:center;
}
#container{
　　width:800px;
　　border:2px solid #022000;
　　padding:15px;
}

上面代碼設置了頁面的邊界、頁面文本的對齊方式，以及父塊的寬度800像素。下面來設置banner板塊，其CSS代碼如下所示。

#banner{
　　margin-bottom:10px;
　　padding:20px;
　　background-color:#2259ff;
　　border:1px solid #002200;
　　text-align:center;
}

這里設置了banner板塊的邊界、填充、背景顏色等。
下面利用float方法將content移動到左側，links移動到頁面右側，這里分別設置了這兩個板塊的寬度和高度，讀者可以根據需要自己調整。

#content{
　　float:left;
　　width:600px;
　　height:300px;
　　border:1px solid #002200;
　　text-align:center;
}
#links{
　　float:right;
　　width:200px;
　　height:300px;
　　border:1px solid #002200;
　　text-align:center;
}

由于content和links對象都設置了浮動屙陛，因此footer需要設置clear·屬性，使其不受浮動的影響，代碼如下所示。

#footer{
　　clear:both;    /* 不受float影響 */
　　padding:10px;
　　border:1px solid #000000;
　　text-align:center;
}
-->

       這樣頁面的整體框架便搭建好了，這里需要指出的是content塊中不能放寬度太長的元素，如很長的圖片或不換行的英文等，否則links將再次被擠到content下方=
       特別的，如果后期維護時希望content的位置與links對調，只需要將content和links屬性中的left和right改變。這是傳統的排版方式所不可能簡單實現的，也正是CSS排版的魅力之一。
       另外，如果links的內容比content的長，在IE瀏覽器上footer就會貼在content下方而與links出現重合。

請點擊：CSS+DIV布局理念 下載本實例相關素材及源碼