DIV+CSS布局理念

一、CSS布局理念

隨著Web2．0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及，國內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用CSS-DIV制作方法，從實(shí)際應(yīng)用情況來看，此種方法絕對好于表格制作頁面的方法。由于CSS富含豐富的樣式，使頁面更加靈活，它可以根據(jù)不同的瀏覽器，達(dá)到顯示效果的統(tǒng)一和不變形。

二、將頁面用DIV分塊

       無論使用表格還是CSS，網(wǎng)頁布局都是把大塊的內(nèi)容放進(jìn)網(wǎng)頁的不同區(qū)域里面。CSS排皈是一種很新的排版理念，首先要將頁面使用<div>整體劃分為幾個(gè)板塊，然后對各個(gè)板塊進(jìn)行CSS定位，最后在各個(gè)板塊中添加相應(yīng)的內(nèi)容。
       在利用CSS布局頁面時(shí)，首先要把頁面分成幾個(gè)模塊，同時(shí)注意各個(gè)模塊之間的父子關(guān)系等。以最簡單的框架為例，頁面由banner(導(dǎo)航條)、主體內(nèi)容(content)、菜單導(dǎo)航(1inks)和腳注(footer)幾個(gè)部分組成，各個(gè)部分分別用自己的id來標(biāo)識，如圖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>

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

三、設(shè)計(jì)各塊的位置

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

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

四、用CSS定位

整理好頁面的框架后，就可以利用CSS對各個(gè)板塊進(jìn)行定位，實(shí)現(xiàn)對頁面的整體規(guī)劃，然后再往各個(gè)板塊中添加內(nèi)容。
下面首先對body標(biāo)記與container父塊進(jìn)行設(shè)置，CSS代碼如下所示。

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

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

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

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

#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對象都設(shè)置了浮動屙陛，因此footer需要設(shè)置clear·屬性，使其不受浮動的影響，代碼如下所示。

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

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

請點(diǎn)擊：CSS+DIV布局理念 下載本實(shí)例相關(guān)素材及源碼