简单分页

 

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 选择器来修改样式：

ul.pagination li a.active {

margin: 0px;

padding: 0px; color: rgb(170, 17, 17);

font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;

font-size: 13.2px;"> #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {

margin: 0px; padding: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px;"> #ddd;}

ul.pagination li a.active {
   
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

圆角样式

可以使用 border-radius 属性为选中的页码来添加圆角样式:

ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}

鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

ul.pagination li a {
    transition: background-color .3s;
}

分页间隔

你可以使用 margin 属性来为每个页码直接添加空格:

 

<style>
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;
transition: background-color .3s;
border: 1px solid #ddd;
font-size: 18px;
}

ul.pagination li a.active {
background-color: #eee;
color: black;
border: 1px solid #ddd;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>