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

2020-10-23 18:39:42

字體：大中小

供稿：網(wǎng)友

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

<!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>123</dt>  <dd>  <img src="https:/upload/20070911205335838.jpg" alt="" title="" id="a" />  <img src="https:/upload/20070911205336630.jpg" alt="" title="" id="b" />  <img src="https:/upload/20070911205336290.jpg" alt="" title="" id="c" />  </dd>  </dl>  </body>  </html>

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

也許很多人對(duì)HTML的UL,OL,LI標(biāo)簽可能都比較熟習(xí),但是對(duì)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ù)語(yǔ)名，

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

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

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

和

都必須放在

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

上一篇：使用text-align:justify實(shí)現(xiàn)兩端對(duì)齊一例

下一篇：一個(gè)老外弄的Clearing floats(清除浮動(dòng)的方法)