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;
}
尝试一下 »
点击及鼠标悬停分页样式
如果点击当前页，可以使用
.active
来设置当前页样式，鼠标悬停可以使用
:hover
选择器来修改样式：
CSS 实例
ul.pagination li a.active
{
background-color:
#4CAF50;
color:
white;
}
ul.pagination li
a:hover:not(.active)
{
background-color:
#ddd;
}
尝试一下 »
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;}
尝试一下 »
可以使用
border-radius
属性为选中的页码来添加圆角样式:
CSS 实例
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
尝试一下 »
鼠标悬停过渡效果
我们可以通过添加
transition
属性来为鼠标移动到页码上时添加过渡效果:
CSS 实例
ul.pagination li a {
transition: background-color .3s;
}
尝试一下 »
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
尝试一下 »
提示:
你可以使用
margin
属性来为每个页码直接添加空格：
CSS 实例
ul.pagination li a {
margin: 0 4px; /* 0 对应的是头部与底部，可以修改它看看效果 */
}
尝试一下 »
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
尝试一下 »
