前端開發中常見的問題之一就是分頁，而分頁的實現方式也有多種。其中，只使用 CSS 實現分頁的方法也是常用的一種。下面就讓我們一起來學習如何使用 CSS 實現分頁吧。

.pagination {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
text-align: center;
}
.pagination__item {
margin: 0 0.5rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 0.25rem;
transition: all 0.2s;
}
.pagination__item:hover {
background-color: #ddd;
}
.pagination__item--active {
font-weight: bold;
background-color: #333;
color: #fff;
}

以上是一個基本的 CSS 樣式，我們可以用它來實現分頁。首先，我們需要先獲取到數據的總頁數，在 HTML 中添加一個 div 元素并賦值為總頁數。

10

然后，我們需要在 JavaScript 中動態地向分頁列表中添加頁碼。這里我們假設當前頁碼為 1，并且將一個 li 元素作為模板。

const pageCount = parseInt(document.querySelector('.page-count').textContent);
const currentPage = 1;
const itemTemplate = document.createElement('li');
itemTemplate.classList.add('pagination__item');
for (let i = 1; i<= pageCount; i++) {
const item = itemTemplate.cloneNode();
item.textContent = i;
if (i === currentPage) item.classList.add('pagination__item--active');
document.querySelector('.pagination').appendChild(item);
}

最后，我們添加一些交互效果，讓用戶可以點擊每個頁碼按鈕切換頁面。

document.querySelector('.pagination').addEventListener('click', (event) =>{
if (!event.target.classList.contains('pagination__item')) return;
document.querySelector('.pagination__item--active').classList.remove('pagination__item--active');
event.target.classList.add('pagination__item--active');
currentPage = parseInt(event.target.textContent);
// 進行頁面切換操作
});

通過以上步驟，我們就成功使用 CSS 實現了分頁功能。總體來說，只使用 CSS 實現分頁可以減輕服務器壓力，提升前端頁面的渲染速度。但需要注意的是，這種方法只適用于數據量較小的情況。