dl dt dd 标签实现翻页的效果

原作者:upwinder 添加时间:2007-09-15 原文发表:2007-09-15 人气:45

<!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>

也许很多人对HTML的UL,OL,LI标签可能都比较熟习,但是对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

标记定义了一个定义列表，定义列表中的条目是通过使用
标记(“definition title”，定义标题)和
标记(“definition description”，定义描述)创建的。
给出了术语名，
标记给出了术语的定义。
也就是说
用来创建列表中的上层项目，
用来创建列表中最下层项目，
和
都必须放在
< /dl>标志对之间。

该文章转载自脚本之家：http://www.jb51.net/html/200709/78/11337.htm

本页地址

• 做商业网站的前期准备？做一个商业网站如何

• 做商业网站要多少钱？

• 经验分享网站设计的十种常见错误做法总结

• 网站建设实践，学生建设网站参考