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

142 阅读 0 评论 94 点赞

我是靠谱客的博主懦弱糖豆，最近开发中收集的这篇文章主要介绍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="//images.kaopuke.com/file_images/20180414/20070911205335838.jpg" alt="" title="" id="a" />  
<img src="//images.kaopuke.com/file_images/20180414/20070911205336630.jpg" alt="" title="" id="b" />  
<img src="//images.kaopuke.com/file_images/20180414/20070911205336290.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>标志对之间。