隨著Web應用的發展，頁面分頁成為越來越常見的UI元素。而其中一個重要的UI元素就是分頁樣式。CSS可以給分頁樣式加上豐富的效果，讓分頁看起來更美觀、更直觀。

首先，我們來看一下一個簡單的分頁樣式：

.pagination {
display: flex;
justify-content: center;
padding: 20px 0;
}
.pagination a {
color: #333;
text-decoration: none;
font-size: 16px;
margin: 0 10px;
}
.pagination a:hover {
color: #666;
}
.pagination .active {
color: #fff;
background-color: #333;
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
}

這個分頁樣式使用了flex布局，讓鏈接按鈕在容器中水平居中。鏈接按鈕的顏色和字體大小都比較簡單，只是加了一點間距。而.active的樣式則表示當前頁面的鏈接按鈕，采用了不同的背景顏色和更加明顯的樣式來突出顯示。

接下來，我們再看一個稍微復雜一點的分頁樣式：

.pagination {
display: flex;
justify-content: center;
margin-top: 50px;
}
.pagination >.number {
display: inline-block;
background-color: #fff;
color: #333;
border: 1px solid #ccc;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
margin-right: 5px;
}
.pagination >.number:hover, .pagination >.number.active {
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
.pagination >.ellipsis {
display: inline-block;
font-size: 24px;
margin-right: 10px;
margin-left: 10px;
}
.pagination >.prev, .pagination >.next {
display: inline-block;
background-color: #333;
color: #fff;
border: none;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
margin-right: 5px;
cursor: pointer;
}
.pagination >.prev:hover, .pagination >.next:hover {
background-color: #666;
}

這個分頁樣式除了數字鏈接，還增加了“上一頁”和“下一頁”按鈕，并且在數字鏈接與按鈕之間用“…”代表省略的頁面鏈接。

通過這樣簡單的CSS樣式，我們可以看到分頁的形式不僅更美觀，也更加易于使用和理解。無論是小型的個人網站，還是大型的Web應用程序，CSS都可以為其設計提供無限的可能性。