实例详解html+css实现静态分页效果(附代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

大家在浏览网站时有没有注意到网页上的分页效果,正在学习HTML和CSS的小伙伴,你会写静态html分页代码吗?这篇文章就结合实例给大家介绍HTML分页效果的制作步骤,最后将html分页代码分享给大家,供大家参考,感兴趣的小伙伴可以看看哦。

实现分页效果需要用到很多CSS中的属性,比如float浮动,hover伪类选择器,text-align居中等,如有不清楚的同学可以参考PHP中文网的相关文章,或者访问CSS视频教程,希望可以帮助到你。

实例详解html+CSS实现静态分页效果的步骤:

html部分

创建一个<div>,给其一个类名center,便于将分页居中;在<div>标签里面创建<ul>标签和<li>标签,ul和li可以制作一个无序列表,因为我们需要点击跳转效果,所以需要在li标签中插入a标签,具体代码如下:

<div class="center">    <ul class="page">        <li><a href="#">上一页</a></li>        <li><a href="#">1</a></li>        <li><a class="active" 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>        <li><a href="#">8</a></li>        <li><a href="#">下一页</a></li>    </ul>   </div>

目前的效果是这样的:

实例详解html+css实现静态分页效果(附代码)

CSS部分

由上图可见,目前的页面比较丑,现在我们需要用CSS进行美化。首先用float: left让无序列表左浮动,排列在一行,用text-decoration: none去除a标签默认的下划线,用 padding调整间距,给分页效果添加颜色和鼠标点击或悬停的效果,具体代码如下:

.page {        display: inline-block;        padding: 0;        margin: 0;    }       .page li {display: inline;}      .page li a {        color: black;        float: left;        padding: 8px 16px;        text-decoration: none;        transition: background-color .3s;        border: 1px solid #ddd;    }       .page .active {        background-color: #4CAF50;        color: white;        border: 1px solid #4CAF50;    }      .page a:hover:not(.active) {background-color: #ddd;}       .center {text-align: center;}

效果如图所示:

实例详解html+css实现静态分页效果(附代码)

由图可见,我们的静态html分页效果已经实现了,当鼠标点击分页内容时,被激活的部分呈现绿色,当鼠标悬停在分页内容上会出现灰色,并让整个分页效果出现在页面的中间。

以上给大家介绍了如何用HTML和CSS实现分页效果,比较详细,初学者可以自己动手尝试,看看你能不能制作出更加炫酷的分页效果,希望这篇文章对你有所帮助!

【相关教程推荐】

1. Html视频教程
2. CSS3最新版参考手册
3. bootstrap教程

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 实例详解html+css实现静态分页效果(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情