原理：
利用超链接实现分页效果。（但此效果的实现与周文彬网站上的方法不同）
<!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:240px;
height:170px;
border:10px
solid #eee;
}
dd {
margin:0;
width:240px;
height:170px;
overflow:hidden;
}
img {
border:1px
solid black
}
dt {
position:absolute;
top:50px;
margin-top: 125px;
margin-left: 90px;
}
a {
display:inline-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= "http://www.jb51.net/upload/2007322173319560.jpg" alt= "" title ="" id="a" />
<img src= "http://www.jb51.net/upload/2007322173319816.jpg" alt= "" title ="" id="b" />
<img src= "http://www.jb51.net/upload/2007322173320970.jpg" alt= "" title ="" id="c" />
</dd>
</dl>
</body>
</html>
运行结果：
<dl><dt><dd>列表标签用法：
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
注：dt和dd放于dl标签内，标签dt与dd处于dl下相同级——即dt不能放入dd内，dd不能放入dt内；dd标签可以若干；同时不能不加dl地单独使用dt标签或dd标签。
扫一扫
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
