前端控
- 0133技术站
- 联系QQ：18840023
- QQ交流群
- 微信公众号
CSS 分页
本节介绍如何通过使用 CSS3 来创建分页
简单分页：
ul{
display: inline-block;
padding: 0;
margin: 0;
}
li {
display: inline;
font-size: 20px;
}
li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}点击 "运行实例" 按钮查看在线实例
效果图：
鼠标悬停样式：
通过伪元素hover来设置
.page{
background-color: pink;
color: white;
}
li a:hover:not(.page){
background-color: #ccc;
}点击 "运行实例" 按钮查看在线实例
效果图：
带圆角边框且有分页间隔的效果：
li a {
border: 1px solid #ccc;
border-radius: 5px;
color: #444;
float: left;
padding: 8px 16px;
text-decoration: none;
margin-left:10px;
background-color: pink;
}点击 "运行实例" 按钮查看在线实例
效果图：
面包屑导航
ul{
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul li {display: inline;}
ul li+li:before {
padding: 8px;
color: black;
content: "/\00a0";/*表示/的意思*/
}
li a {color: #444;
list-style: none;}点击 "运行实例" 按钮查看在线实例
效果图：
+
推荐手册