快捷導(dǎo)航

XHTML下用dl,dt,dd標(biāo)簽實現(xiàn)翻頁的效果代碼

更新時間：2007年09月11日 20:51:29 作者：

今天在標(biāo)準(zhǔn)之類的blog(http://www.aa25.cn)看到"純CSS代碼實現(xiàn)翻頁"
的文章

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">  <head profile="http://www.w3.org/2000/08/w3c-synd/#">  <meta http-equiv="content-language" content="zh-cn" />  <meta http-equiv="content-type" content="text/html;charset=gb2312" />  <style>  dl {    position:absolute;    width:389px;    height:154px;    border:10px solid #eee;    }  dd {    margin:0;    width:389px;    height:154px;    overflow:hidden;    }  img {    border:1px solid black    }  dt {    position:absolute;    right:3px;    top:50px;    }  a {    display:block;    margin:1px;    width:20px;    height:20px;    text-align:center;    font:700 12px/20px "宋體",sans-serif;    color:#fff;    text-decoration:none;    background:#666;    border:1px solid #fff;    filter:alpha(opacity=40);    opacity:.4;    }  a:hover {    background:#000    }  </style>  </head>  <body>  <dl>  <dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>  <dd>  <img src="/upload/20070911205335838.jpg" alt="" title="" id="a" />  <img src="/upload/20070911205336630.jpg" alt="" title="" id="b" />  <img src="/upload/20070911205336290.jpg" alt="" title="" id="c" />  </dd>  </dl>  </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

也許很多人對HTML的UL,OL,LI標(biāo)簽可能都比較熟習(xí),但是對DL,DT,DD可能就不怎么了解了,那么到W3.ORG去看看吧,
http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-list.html
,http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-list.html

標(biāo)記(“definition title”，定義標(biāo)題)和

標(biāo)記(“definition description”，定義描述)創(chuàng)建的。

給出了術(shù)語名，

標(biāo)記給出了術(shù)語的定義。
也就是說

用來創(chuàng)建列表中的上層項目，

用來創(chuàng)建列表中最下層項目，

和

都必須放在

< /dl>標(biāo)志對之間。