css如何实现数字分页效果代码及步骤

当前位置 : 首页 > 网页制作 > 心得技巧 > css如何实现数字分页效果代码及步骤

css如何实现数字分页效果代码及步骤

来源:互联网 作者:脚本宝典 时间:2015-09-04 15:09
相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。 代码实例如下 复制代码 代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http

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

复制代码

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<head> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
ul 

list-style:none; 

ul li 

float:left; 
width:22px; 
height:22px; 
margin-left:5px; 



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元素的背景色设置为白色,是因为默认状态背景是透明的,如果不设置背景色,将会看到两边被遮盖的边框。


Tag:
网友评论

<