最近在學習CSS分頁的樣式設計，特別喜歡一種漂亮的效果，現在和大家分享一下。

/*頁面容器*/
.page-container{
display: flex;
justify-content: center;
margin-top: 20px;
}
/*切換按鈕*/
.page-btn{
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background-color: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
}
.page-btn:hover{
background-color: #ddd;
}
/*當前頁碼*/
.current-page{
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #fff;
border-radius: 50%;
background-color: #1abc9c;
cursor: default;
}
/*禁用按鈕*/
.disable-btn{
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #999;
border-radius: 50%;
background-color: #f5f5f5;
cursor: default;
}

以上是CSS代碼，接下來是HTML代碼。

<div class="page-container">
<div class="page-btn disable-btn"><</div>
<div class="page-btn">1</div>
<div class="page-btn">2</div>
<div class="page-btn">3</div>
<div class="current-page">4</div>
<div class="page-btn">5</div>
<div class="page-btn">6</div>
<div class="page-btn">7</div>
<div class="page-btn disable-btn">></div>
</div>

以上是一個基本的分頁CSS樣式，可以根據需要進行更改和調整。