常見的CSS頁面分頁屬性及其使用

一、首尾省略號

當分頁數量特別多的時候，為了能讓頁面更為簡潔明了，我們可以使用首尾省略號來縮略顯示分頁數量，而不用在頁面上一一列出每個頁碼。這種方式需要藉助CSS的overflow:hidden屬性來實現。在分頁容器的寬度已經確定的情況下，增加一定的寬度，將多餘的頁碼隱藏。同時，為了使最左側和最右側的頁碼不被隱藏，也需要將其設置為一直顯示。

.page {
    width: 500px; /* 分頁容器寬度 */
    overflow: hidden;
}

.page ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page li {
    float: left;
    margin-right: 5px;
}

.page li:first-child {
    margin-right: 10px; /* 最左側頁碼增加寬度，使其一直顯示 */
}

.page li:last-child {
    margin-right: 10px; /* 最右側頁碼增加寬度，使其一直顯示 */
}

.page li.ellipsis {
  width: auto; /* 首尾省略號 */
  margin: 0 5px;
  padding: 0 5px;
}

二、滾動分頁

當分頁數量更多的時候，可以考慮使用滾動的方式來呈現分頁，用戶通過滑動來選擇不同的分頁。這種方式可以藉助CSS的overflow-y屬性來實現。我們需要先將分頁信息全部顯示出來，然後設置分頁容器的固定高度，通過overflow-y:hidden將超出部分隱藏，再通過JS或滑鼠控制滾動條的滾動，從而進行不同分頁的選擇。

.page {
    height: 300px; /* 分頁容器高度 */
    overflow-y: hidden;
}

.page ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

.page li {
    margin: 10px;
}

.page li.active {
    background-color: #ccc; /* 激活的分頁背景色 */
}

三、分頁大小設置

當數據量特別大，或用戶需要自定義每頁顯示的數據量時，我們可以提供分頁大小設置的功能。這種方式可以使用select標籤來實現，用戶可以通過下拉選擇框來設置每頁顯示的數據量，然後觸發重新載入分頁數據的操作。

.page-size {
    margin: 10px;
}

.page-size select {
    margin: 0 5px;
}

四、分頁樣式自定義

在一些特殊的場景下，我們需要根據具體的需求來對分頁進行樣式的自定義。這種方式可以藉助CSS的偽類以及靈活運用class來實現。在這裡以修改分頁頁碼顏色為例：

.page li {
    display: inline-block;
    margin-right: 5px;
    padding: 0 5px;
    border-radius: 5px;
}

.page li.active {
    background-color: #ccc;
}

.page li a {
    color: #333;
}

.page li:hover a{
    color: #fff;
    background-color: #333;
}