介绍 & lt; div类=癱enter"比;
& lt; ul类=皃age"祝辞
& lt; li> https://www.yisu.com/zixun/& lt; a href=" # ">上一页
<李> 1
<李> <类="活跃" href=" # "> 2
<李> 3
<李> 4
<李> 5
<李> 6
<李> 7
<李> 8
<李> 下一页
小编给大家分享一下html + css实现静态分页效果的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
实例详解html + css实现静态分页效果的步骤:
html部分
创建一个& lt; div>,给其一个类名中心,便于将分页居中;在& lt; div>标签里面创建& lt; ul>标签和& lt; li>标签,ul和李可以制作一个无序列表,因为我们需要点击跳转效果,所以需要在李标签中插入一个标签,具体代码如下:
目前的效果是这样的:
css部分
由上图可见,目前的页面比较丑,现在我们需要用css进行美化。首先用浮动:离开让无序列表左浮动,排列在一行,用文字修饰:没有去除一个标签默认的下划线,用填充调整间距,给分页效果添加颜色和鼠标点击或悬停的效果,具体代码如下:
效果如图所示:
由图可见,我们的静态html分页效果已经实现了,当鼠标点击分页内容时,被激活的部分呈现绿色,当鼠标悬停在分页内容上会出现灰色,并让整个分页效果出现在页面的中间。
看完了这篇文章,相信你对html + css实现静态分页效果的方法有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
