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

发布：dxy 字体：[增加减小] 类型：转载

今天在标准之类的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><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 全选提示:你可先修改部分代码,再按运行]

也许很多人对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>标志对之间。

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

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：一个老外弄的Clearing floats(清除浮动的方法)
下一篇文章：div的dispaly:inline样式和span的区别

·在百度中搜索关于“XHTML下用dl,dt,dd标签实现翻页的效果代码”相关内容
·在谷歌中搜索关于“XHTML下用dl,dt,dd标签实现翻页的效果代码”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行