24款css分页样式 |css flex 换行

/* 实心圆形 */
.pagination {
display: inline-block;
border-radius: 50%;
background-color: #f2f2f2;
}
.pagination a {
color: #777;
display: inline-block;
padding: 8px 16px;
transition: background-color .3s;
}
.pagination a.active {
background-color: #007bff;
color: #fff;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
/* 斜线分割线 */
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #007bff;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 数字页码 */
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #007bff;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
/* 左右箭头 */
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #007bff;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
/* 分段 */
.pagination {
display: inline-block;
}
.pagination span {
display: inline-block;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
margin-right: 4px;
}
.pagination a {
color: #007bff;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #007bff;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
/* 图标 */
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #007bff;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
.pagination .prev, .pagination .next {
display: inline-block;
padding: 4px;
margin: 0 4px;
color: #007bff;
border: 1px solid #007bff;
border-radius: 50%;
}
.pagination .prev:hover, .pagination .next:hover {
color: white;
background-color: #007bff;
}

以上就是24款不同的CSS分页样式，它们有的简约大方、有的色彩鲜艳，有的使用图标、有的使用斜线分割线，开发者可以根据自己的需求选择相应的样式代码，更好地设计自己的分页。