CSS是現代互聯網設計中不可或缺的一部分，它可以實現豐富的樣式效果，其中之一就是分頁樣式。在這篇文章中，我們將為您介紹一些常見的CSS分頁樣式，讓您的頁面看起來更加專業和美觀。

/*-------------------基本樣式-------------------*/
.page{
display:inline-block;
background-color:#f8f8f8;
border:1px solid #ddd;
border-radius:5px;
padding:5px 10px;
margin:0 2px;
color:#666;
font-size:14px;
text-align:center;
cursor:pointer;
}
.page:hover{
background-color:#eee;
}
.selected{
background-color:#007bff;
color:#fff;
}
/*-------------------數字分頁-------------------*/
.page-num{
display:inline-block;
}
/*-------------------上一頁/下一頁-------------------*/
.prev, .next{
display:inline-block;
padding:4px 8px;
}
.prev:hover, .next:hover{
background-color:#007bff;
color:#fff;
}
/*-------------------省略號-------------------*/
.ellipsis{
display:inline-block;
width:20px;
text-align:center;
}
/*-------------------帶圖標分頁-------------------*/
.page-icon{
background-image:url(../images/page-icon.png);
background-repeat:no-repeat;
background-position:0 -40px;
display:inline-block;
width:32px;
height:32px;
text-indent:-9999px;
}
.page-prev{
background-position:0 -80px;
}
.page-next{
background-position:0 -120px;
}
/*-------------------帶邊框分頁-------------------*/
.page-border{
border:none;
padding:0;
margin:0;
border-radius:0;
}
.page-border:hover{
background-color:#eee;
}
.page-border.selected{
background-color:#007bff;
color:#fff;
}
/*-------------------總頁數-------------------*/
.total-page{
display:inline-block;
padding:4px 8px;
margin-right:10px;
color:#999;
}
/*-------------------總記錄數-------------------*/
.total-count{
display:inline-block;
padding:4px 8px;
margin-right:10px;
color:#999;
}

現在您已經了解了一些常見的CSS分頁樣式，可以根據自己的需求進行選擇和修改。比如，數字分頁在您需要直觀的顯示當前頁碼時非常好用，而帶圖標分頁則適合需要在分頁的左右兩側添加一些特殊按鈕的情況。希望這篇文章能夠幫助您實現更加優美的頁面效果。