隨著Web應用和網站的不斷發展，分頁文本成為了許多站點的必備功能之一。為幫助開發者增強分頁的設計能力，下面列舉了24款漂亮的CSS分頁樣式。

/* 實心圓形 */
.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分頁樣式，它們有的簡約大方、有的色彩鮮艷，有的使用圖標、有的使用斜線分割線，開發者可以根據自己的需求選擇相應的樣式代碼，更好地設計自己的分頁。