XHTML下用dl,dt,dd标签实现翻页的效果代码


答案：今天在标准之类的blog(http://www.aa25.cn)看到"纯CSS代码实现翻页" 
的文章 
<!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="/upload/20121014/20070911205335838152dn3rjiuv.jpg" alt="" title="" id="a" />  
<img src="/upload/20121014/20070911205336630bdoomwyaxn4.jpg" alt="" title="" id="b" />  
<img src="/upload/20121014/20070911205336290yaztxgrvaeu.jpg" alt="" title="" id="c" />  
</dd>  
</dl>  
</body>  
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

也许很多人对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>标志对之间。
上一个：无js5款纯div+css制作的弹出菜单标准
下一个：用CSS给图片打标的代码
更多图片编程知识: