DIV+CSS 網頁佈局

很多網頁都是採用 TABLE 元素來佈局，將頁面分成不同的功能區。現在業界提倡改用 CSS+DIV 的佈局方式。引導這個趨勢的原因有幾個： TABLE 元素，必須其內含的所有內容都下載完成，才能開始展現，所以比較慢。使用 TABLE 佈局，其標籤碼較多，而有些搜尋引擎會依據內容對標籤碼的比率，評價網頁；比率低的網頁，會給予較低評價。

CSS+DIV 的佈局方式很簡單，由下面的範例就可以看出來。範例的下方有幾個 DIV 元素構成的區塊。每一個 DIV 區塊是一個特定功能的容器，下面分成了：標題，邊欄，主文，頁底。接著就是要設定每一個區塊的位置，這就要用到 CSS 風格表。在下面的風格表中有幾個特徵用於排列位置：

1. margin:0px auto：此一設定可以將 DIV 區塊排在水平中央。
2. float:left：原本 DIV 區塊是上下排列，此設定可將 DIV 區塊左右並排。下例中，側欄區塊與主文區塊，就是用此特徵才能左右並排。
3. clear:left：頁底區塊利用此特徵，排到側欄區塊的下方。

使用時，要將風格表放在 HEAD 元素的區域間。也可以針對不同的 媒體 設定不同的風格表；例如列印時可以不印側欄。 <style type='text/css'> #header2 {width:90%; height:30px; text-align:center; background:#833; margin:0 auto; } #outer2 {width:90%; margin:0px auto; background:white; } #sidebar2 {width:25%; float:left; height:200px; background:#383; } #content2 {width:75%; float:left; height:200px; background:#338; } #footer2 {width:90%; clear:left; height:30px; background:#833; margin:0 auto; } </style> <div id='header2'>標題</div> <div id='outer2'> <div id='sidebar2'>邊欄</div> <div id='content2'>主文</div> </div> <div id='footer2'>頁底</div>