本篇内容介绍了“css如何实现数字分页效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
css如何实现数字分页效果:
相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。
代码实例如下:
代码如下:
& lt; !DOCTYPE html>,
& lt; html>,
& lt; head>,
& lt;元charset=?utf-8"比;,
& lt;元name=癮uthor"内容=?“/比;,
& lt; title> css实现数字分页效果& lt;/title>
& lt;风格类型=拔谋?css"比;
ul
{
list-style:没有;
}
ul李
{
浮动:左;
宽度:22 px;
高度:22 px;
margin-left: 5 px;
}
{
宽度:20 px;
高度:20 px;
显示:块;
text-align:中心;
文字修饰:没有;
背景颜色:白色;
边界:1 px固体# 666;
}
:悬停
{
宽度:40像素;
高度:30 px;
边界:1 px固体# 666;
:绝对;
行高:30 px;
保证金:5 px 0 0 -10 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul>
& lt; li> & lt; a href=https://www.yisu.com/zixun/1 " # ">
& lt; li> & lt; a href=https://www.yisu.com/zixun/2 " # ">
& lt; li> & lt; https://www.yisu.com/zixun/a href=" # "> 3
& lt; li> & lt; a href=https://www.yisu.com/zixun/4 " # ">
& lt; li> & lt; 5 https://www.yisu.com/zixun/href=" # ">
& lt; li> & lt; a href=https://www.yisu.com/zixun/6 " # ">
& lt; li> & lt; a href=7 https://www.yisu.com/zixun/" # ">
& lt;/ul>
& lt;/body>
& lt;/html>
以上代码实现了我们想要的效果,下面简单介绍一下实现的步骤:
一。使用浮动属性,以便让李元素水平排列。
二。将一个元素设置为块级元素,然后设置它们的尺寸。
三。通过使用链接伪类控制当鼠标放在链接之上时使一元素的尺寸变大,并且使用绝对定位,使当前一元素能够覆盖周边的元素。
特别说明:之所以让一元素的背景色设置为白色,是因为默认状态背景是透明的,如果不设置背景色,将会看到两边被遮盖的边框。
