安云网 - AnYun.ORG | 专注于网络信息收集、网络数据分享、网络安全研究、网络各种猎奇八卦。
当前位置: 安云网 > 技术关注 > 编程茶楼 > css实现数字分页效果教程

css实现数字分页效果教程

时间:2014-05-06来源: 作者:点击:
CSS如何实现数字分页效果: 相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。 代码实例如下: 复制代码 代码如下: !DOCTYPE html html head meta charset="

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

相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。 内容来自AnYun.ORG

代码实例如下: 内容来自安云网


复制代码
代码如下:

<!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> copyright AnYun.ORG
<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>

内容来自AnYun.ORG

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

一. 使用浮动属性,以便让li元素水平排列。 内容来自安云网

二.将a元素设置为块级元素,然后设置它们的尺寸。 安云网咨询系统

三.通过使用链接伪类控制当鼠标放在链接之上时使a元素的尺寸变大,并且使用绝对定位,使当前a元素能够覆盖周边的元素。 安云网,anyun.org

特别说明:之所以让a元素的背景色设置为白色,是因为默认状态背景是透明的,如果不设置背景色,将会看到两边被遮盖的边框。

ANYUN.ORG

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
相关内容
推荐内容