css如何实现数字分页效果

人生最好的旅行,就是你在一个陌生的地方,发现一种久违的感动。你在看孤独的风景,你在逃避我的真心!

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 rel="nofollow noopener noreferrer" href="#">1</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">2</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">3</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">4</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">5</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">6</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">7</a></li>
</ul>
</body>
</html>

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

一. 使用浮动属性,以便让li元素水平排列。

二.将a元素设置为块级元素,然后设置它们的尺寸。

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

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

本文css如何实现数字分页效果到此结束。我是说阿里巴巴发现了金矿,那我们绝对不自我去挖,我们期望别人去挖,他挖了金矿给我一块就能够了。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例