DIV CSS 佈局教程網

打開網易郵箱的登錄界面，我們會發現，在首頁的底部有這樣一個“最新動態”的廣告條，其設計代碼如下：  Html代碼

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
      在這裡，網易采用了table來設計這個頁面效果，當然<table>用在這裡並沒有什麼不妥。但是今天，我們主要是想用一個非<table>方法來達到同樣的效果。
        首先看一下用到的背景圖

這張圖片中包含了所有該頁面中用到的圖片，在這個橫條中只用到了底部了兩個，我們可以看出，對於長度遠小於實際內容的背景來說，使用<table>有很多便利性。
        接下來我們看看怎麼用非<table>標簽來達到同樣的效果：首先，從主義上來看“最新動態”是標題，其它後面幾項都是“最新動態的詳細內容”，存在主次關系。這個至少可以想到一點就是“最新動態”可能用到<hn>標簽；其次，各內容之間的並列關系，對於處理並列關系我們常用的就是無序列表<ul>了；最後，結合上面的主次與並列，我們可以考慮用<dl><dt><dd>來實現這個效果了（關於這三個標簽的具體含義和應用請參考“ 經常被遺忘的重要標簽——<dl><dt><dd>”）。

1. * {padding:0;margin:0;font-size:12px;font-family:Tahoma "宋體"}  
2. dl {background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat 0px -259px;float:left;padding-left:5px; margin:100px 0 100px;} /*設定背景位置，設定背景不重復*/  
3. dt {height:26px;line-height:26px;float:left;background:RGB(187,228,246);padding:0 5px;}/*向左浮動，以期dt和dl內容在在同一行內*/  
4. dd {padding-left:20px; height:26px;line-height:26px;background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat -230px -300px;display:inline;float:left}/*為每個dd設定樣式，當然在有些情況下可以使用list-style-type，但這裡似乎行不通*/  
5. .first {padding-left:16px;background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat -8px -259px;}/*設定first的特殊樣式*/  
6. .last {padding-left:40px;padding-right:20px;background:#E1F6FF;background:url(attachments/month_0712/g2007123002932.gif) no-repeat -17px -259px;}  

* {padding:0;margin:0;font-size:12px;font-family:Tahoma "宋體"}
dl {background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat 0px -259px;float:left;padding-left:5px; margin:100px 0 100px;} /*設定背景位置，設定背景不重復*/
dt {height:26px;line-height:26px;float:left;background:RGB(187,228,246);padding:0 5px;}/*向左浮動，以期dt和dl內容在在同一行內*/
dd {padding-left:20px; height:26px;line-height:26px;background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat -230px -300px;display:inline;float:left}/*為每個dd設定樣式，當然在有些情況下可以使用list-style-type，但這裡似乎行不通*/
.first {padding-left:16px;background:#E1F6FF url(attachments/month_0712/g2007123002932.gif) no-repeat -8px -259px;}/*設定first的特殊樣式*/
.last {padding-left:40px;padding-right:20px;background:#E1F6FF;background:url(attachments/month_0712/g2007123002932.gif) no-repeat -17px -259px;}

1.   
2. <dl>  
3.     <dt>最新動態</dt>  
4.     <dd class="first"> </dd>  
5.     <dd height="26">100％有獎！白金情侶項鏈等你拿</dd>  
6.     <dd>出門在外，緊急郵件處理不了怎麼辦？</dd>  
7.     <dd>打造中國最好的收費郵箱</dd>  
8.     <dd class="last"> </dd>  
9. </dl>  

<dl>
    <dt>最新動態</dt>
    <dd class="first"> </dd>
    <dd height="26">100％有獎！白金情侶項鏈等你拿</dd>
    <dd>出門在外，緊急郵件處理不了怎麼辦？</dd>
    <dd>打造中國最好的收費郵箱</dd>
    <dd class="last"> </dd>
</dl>

運行上面的效果，我們可以看到兩者大體相似。
當然，本例存在一個問題就是<dd class="first"> </dd>和<dd class="last"> </dd>是兩個為了實現我們想要的效果而存在的，並無實在的語義，因此這也是本例的一個缺點。不過我相信，應該有更好的不使用<table>標簽實現此類問題辦法。