CSS 分页实例
CSS 分页实例
.article-body ul li { background-image:none}
.pagination,.pagination2,.pagination3 {
display: inline-block;
padding: 0;
margin: 8px 0;
}
.pagination li,.pagination2 li,.pagination3 li {display: inline;}
.pagination li a, .pagination2 li a,.pagination3 li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.border li a {
transition: background-color .3s;
border:1px solid #ddd;
}
.size li a {font-size:22px;}
.btnround li a {border-radius: 5px;}
.hover li a {transition: background-color .3s;}
.margin li a {margin:0 4px;}
.pagination3 li:first-child a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination3 li:last-child a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
ul.pagination2 li a.active, ul.pagination3 li a.active {
background-color: #4CAF50;
color: white;
border:1px solid #4CAF50;
}
ul.pagination2 li a:hover:not(.active),
ul.pagination3 li a:hover:not(.active) {background-color: #ddd;}
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/0a0";
}
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。
简单分页 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页： CSS 实例
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
点击及鼠标悬停分页样式
CSS 实例
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;}
圆角样式
鼠标悬停过渡效果
带边框分页
圆角边框
提示: 在第一个分页链接和最后一个分页链接添加圆角：
分页间隔
提示: 你可以使用 margin 属性来为每个页码直接添加空格：
分页字体大小
居中分页
更多实例
CSS 实例
