您的位置：首页 > Web前端 > CSS

css实现数字分页效果

2014-04-30 16:55 274 查看

CSS如何实现数字分页效果:

相当数量的网站都使用数字分页效果，例如本站的分页也是采用此方式，还算是比较美观使用吧。

代码实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="" />  
<title>css实现数字分页效果</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元素的背景色设置为白色，是因为默认状态背景是透明的，如果不设置背景色，将会看到两边被遮盖的边框。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航