前端练习2-分页效果

来源：互联网发布：菜鸟网络航空港区地址编辑：程序博客网时间：2024/06/05 05:19

原理：

利用超链接实现分页效果。（但此效果的实现与周文彬网站上的方法不同）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<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>

<dd>

</dd>

</dl>

</body>

</html>

运行结果：

<dl><dt><dd>列表标签用法：

<dl>

<dt>列表标题</dt>

<dd>列表内容</dd>

</dl>

注：dt和dd放于dl标签内，标签dt与dd处于dl下相同级——即dt不能放入dd内，dd不能放入dt内；dd标签可以若干；同时不能不加dl地单独使用dt标签或dd标签。

0 0