CSS如何实现数字分页效果

来源:互联网 时间:1970-01-01

CSS如何实现数字分页效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。
代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

ul

{

list-style:none;

}

ul li

{

float:left;

width:22px;

height:22px;

margin-left:5px;

}

a

{

width:20px;

height:20px;

display:block;

text-align:center;

text-decoration:none;

background-color:white;

border:1px solid #666;

}

a:hover

{

width:40px;

height:30px;

border:1px solid #666;

position:absolute;

line-height:30px;

margin:-5px 0 0 -10px;

}

</style>

</head>

<body>

<ul>

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">6</a></li>

<li><a href="#">7</a></li>

</ul>

</body>

</html>

以上代码实现了我们想要的效果,下面简单介绍一下实现的步骤:
一.

使用浮动属性,以便让li元素水平排列。
二.将a元素设置为块级元素,然后设置它们的尺寸。
三.通过使用链接伪类控制当鼠标放在链接之上时使a元素的尺寸变大,并且使用绝对定位,使当前a元素能够覆盖周边的元素。
特别说明:之所以让a元素的背景色设置为白色,是因为默认状态背景是透明的,如果不设置背景色,将会看到两边被遮盖的边框。
友情提示:更多数字分页效果下载可以参阅二十多款数字分页效果 。


相关阅读:
Top