dl、dt、dd 標(biāo)記來(lái)改造163郵箱的廣告條

2024-07-11 08:42:52

字體：大中小

供稿：網(wǎng)友

打開(kāi)網(wǎng)易郵箱的登錄界面，我們會(huì)發(fā)現(xiàn)，在首頁(yè)的底部有這樣一個(gè)“最新動(dòng)態(tài)”的廣告條，其設(shè)計(jì)代碼如下：HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords" content="網(wǎng)易163郵箱--中文郵箱第一品牌" /><meta name="description" content="網(wǎng)易163郵箱--中文郵箱第一品牌" /><title>網(wǎng)易163免費(fèi)郵--中文郵箱第一品牌</title><link rel="shortcut icon" href="http://mail.163.com/favicon.ico" /><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><link href="http://mimg.163.com/index/new/163_index_style12.css" rel="stylesheet" type="text/css" /></head><body><div id="NewsDiv"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td id="NewsDiv-left"></td><td width="80" align="center" valign="middle" class="font2" ><a href="http://kefu.mail.163.com/?from=163sy2" target="_blank">最新動(dòng)態(tài)</a></td><td id="NewsDiv-mid"></td><td class="NewsDiv-mid2"><a href="http://popogame.163.com/topic/match/index.html?from=163" target="_blank">100％有獎(jiǎng)！白金情侶項(xiàng)鏈等你拿</a></td><td class="NewsDiv-mid2><a href="http://smsmail.163.com/newsmsmail/eaw_index.jsp" target="_blank">出門(mén)在外，緊急郵件處理不了怎么辦？</a></td><td class="NewsDiv-mid2"><a href="http://www.188.com/" target="_blank">打造中國(guó)最好的收費(fèi)郵箱</a</td><td id="NewsDiv-rig"><a href="http://kefu.mail.163.com/?from=163sy2" target="_blank" title="更多"><span class="arrow">>></span></a></td></tr></table></div></body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
在這里，網(wǎng)易采用了table來(lái)設(shè)計(jì)這個(gè)頁(yè)面效果，當(dāng)然<table>用在這里并沒(méi)有什么不妥。但是今天，我們主要是想用一個(gè)非<table>方法來(lái)達(dá)到同樣的效果。
首先看一下用到的背景圖

這張圖片中包含了所有該頁(yè)面中用到的圖片，在這個(gè)橫條中只用到了底部了兩個(gè)，我們可以看出，對(duì)于長(zhǎng)度遠(yuǎn)小于實(shí)際內(nèi)容的背景來(lái)說(shuō)，使用<table>有很多便利性。
接下來(lái)我們看看怎么用非<table>標(biāo)簽來(lái)達(dá)到同樣的效果：首先，從主義上來(lái)看“最新動(dòng)態(tài)”是標(biāo)題，其它后面幾項(xiàng)都是“最新動(dòng)態(tài)的詳細(xì)內(nèi)容”，存在主次關(guān)系。這個(gè)至少可以想到一點(diǎn)就是“最新動(dòng)態(tài)”可能用到<hn>標(biāo)簽；其次，各內(nèi)容之間的并列關(guān)系，對(duì)于處理并列關(guān)系我們常用的就是無(wú)序列表<ul>了；最后，結(jié)合上面的主次與并列，我們可以考慮用<dl><dt><dd>來(lái)實(shí)現(xiàn)這個(gè)效果了（關(guān)于這三個(gè)標(biāo)簽的具體含義和應(yīng)用請(qǐng)參考“ 經(jīng)常被遺忘的重要標(biāo)簽——<dl><dt><dd>”）。

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

<dl>
<dt>最新動(dòng)態(tài)</dt> <ddclass="first"></dd>
<ddheight="26">100％有獎(jiǎng)！白金情侶項(xiàng)鏈等你拿</dd> <dd>出門(mén)在外，緊急郵件處理不了怎么辦？</dd>
<dd>打造中國(guó)最好的收費(fèi)郵箱</dd> <ddclass="last"></dd>
</dl>

<dl>
<dt>最新動(dòng)態(tài)</dt>
<dd class="first"></dd>
<dd height="26">100％有獎(jiǎng)！白金情侶項(xiàng)鏈等你拿</dd>
<dd>出門(mén)在外，緊急郵件處理不了怎么辦？</dd>
<dd>打造中國(guó)最好的收費(fèi)郵箱</dd>
<dd class="last"></dd>
</dl>
運(yùn)行上面的效果，我們可以看到兩者大體相似。
當(dāng)然，本例存在一個(gè)問(wèn)題就是<dd class="first"></dd>和<dd class="last"></dd>是兩個(gè)為了實(shí)現(xiàn)我們想要的效果而存在的，并無(wú)實(shí)在的語(yǔ)義，因此這也是本例的一個(gè)缺點(diǎn)。不過(guò)我相信，應(yīng)該有更好的不使用<table>標(biāo)簽實(shí)現(xiàn)此類(lèi)問(wèn)題辦法。

上一篇：CSS選擇器的使用技巧

下一篇：CSS教程：網(wǎng)頁(yè)圖片垂直居中的使用技巧