HTML和CSS如何制作分页效果

发布时间:2020-09-26 11:34:59 作者:小新
来源:亿速云 阅读:161

这篇文章主要介绍HTML和CSS如何制作分页效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

以下是html和CSS实现分页效果的步骤详解:

HTML部分:

在页面中创建一个<ul>标签和多个<li>标签,分别给它们一个class类名,便于对其进行CSS样式设置,ul和li可以制作一个无序列表,因为我们需要点击跳转效果,所以需要在li标签中插入a标签,具体代码如下:

<ul class="box modal-4">
<li><a href="#" class="prev"><i class="fa fa-chevron-left"></i> Previous</a></li>
<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="#" class="active">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#" class="next"> Next<i class="fa fa-chevron-right"></i></a></li>
</ul>

CSS部分:

基本框架已经搭建出来了,现在我们需要用CSS进行美化。首先用float: left让无序列表左浮动,排列在一行,用text-decoration: none去除a标签默认的下划线,用 padding调整间距,给分页效果添加颜色和鼠标点击或悬停的效果,具体代码如下:

.box {list-style: none;display: inline-block;padding: 0;margin-top: 10px;}
.box li {display: inline;text-align: center;}
.box a {
float: left;
display: block;
font-size: 14px;
text-decoration: none;
padding: 5px 12px;
color: #fff;
margin-left: -1px;
border: 1px solid transparent;
line-height: 1.5;
}
.box a.active {cursor: default;}
.box a:active {outline: none;}
.modal-4 a {
margin: 0 5px;
padding: 0;
width: 30px;
height: 30px;
line-height: 30px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-color: #F7C12C;
}
.modal-4 a.prev {
-moz-border-radius: 50px 0 0 50px;
-webkit-border-radius: 50px;
border-radius: 50px 0 0 50px;
width: 100px;
}
.modal-4 a.next {
-moz-border-radius: 0 50px 50px 0;
-webkit-border-radius: 0;
border-radius: 0 50px 50px 0;
width: 100px;
}
.modal-4 a:hover {background-color: #FFA500;}
.modal-4 a.active,.modal-4 a:active {background-color: #FFA100;}

效果图:

HTML和CSS如何制作分页效果

由图可见,一个完整的html分页效果已经制作好了,当鼠标悬停在分页内容上或者分页内容被激活时,其呈现深橘黄色,当鼠标离开时则呈现橘黄色。

以上是HTML和CSS如何制作分页效果的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. html+css实现静态分页效果的方法
  2. html和CSS实现爱心效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html css

上一篇:解决layui的radio属性或别的属性没显示出来的问题

下一篇:css优先级是怎么计算的

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》