CSS如何实现数字分页效果

浏览数：21 / 时间：2015年06月09日

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元素的背景色设置为白色，是因为默认状态背景是透明的，如果不设置背景色，将会看到两边被遮盖的边框。
友情提示:更多数字分页效果下载可以参阅二十多款数字分页效果。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS如何实现数字分页效果