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

更新时间：2007年09月11日 20:51:29 作者：

今天在标准之类的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 全选注:引入外部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>标志对之间。

关于filter滤镜应用于图片的两种创意
关于filter滤镜应用于图片的两种创意...
2006-12-12
关于< tbody >的一个实例，很实用。
tbody Tab选项卡效果代码关键只是在<tbody>和选项卡的设置上。我在6个<tr></tr>段分别设置了<tbody></tbody>，目的是为了让一个javascript程序调用6个选项卡的时候可以循环设置tBodies属性。调用的时候是采用了遍历：将6个tBodies先全部都初始化为display='none'，然后紧接着将tBodies[n]设置为display='block'，将这一个tBodies显示出来。
2008-03-03
DL.DT.DD实现左右的布局简单例子
DL.DT.DD实现左右的布局简单例子...
2007-12-12
用css实现图片垂直居中的使用技巧
使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中
2008-05-05
css利用A标签的背景可能作出很有意思的效果
css利用A标签的背景可能作出很有意思的效果...
2007-12-12
手机屏幕尺寸测试——手机的实际显示页面的宽度
本文主要通过测试，得出手机端网页实际显示的宽度，给开发人员在做手机端开发的时候做一些参考，希望能帮到大家。
2016-04-04
指定网页的doctype解决CSS Hacking方法总结
我们都知道，要做WD（web designer）,首先得伺侯好几个浏览器:IE6,IE7,Firefox.一般的页面，都只要求在IE6,IE7,Firefox下正常工作就行了。
2008-09-09
解决ie动态修改link样式，import css不刷新的问题
当我们需要动态更新link的样式的时候，通常是直接修改link的 href 属性。但是如果样式里有import的样式表，IE就不会在发起请求去刷新了(其他浏览器都是正常的)
2008-05-05
如何处理多国语言
如何处理多国语言...
2006-11-11
在iframe中隐藏横向滚动条的方法大全
在iframe中隐藏横向滚动条的方法大全...
2007-01-01