分頁條是web開發中常用的前端組件之一，它能將數據分批次展示給用戶。我們知道諸如Bootstrap這類框架都提供了非常漂亮的分頁條組件，但是你的項目可能不用到Bootstrap，你想自己定制一個屬于你自己項目的漂亮的分頁條，那么請看本文。

查看演示               下載源碼

本文給大家介紹用純CSS制作一款漂亮的分頁條，可以適應各種PC和手機等移動端屏幕，開發者可以下載源碼自行更改css代碼，定制屬于你自己項目的風格。

HTML結構

分頁結構分別由兩邊的上一頁和下一頁兩個按鈕、以及中間的數字頁碼組成。我們用一個<nav>元素來包裹一個無序列表（ul.cd-pagination）。在無序列表中，我們給上一頁和下一頁按鈕加上.button樣式，中間頁面數字中，用a.current樣式表示當前頁碼。如果想讓頁碼間無空隙，則給ul添加.no-space樣式，代碼結構如下：

<nav role="navigation">
<ul class="cd-pagination no-space">
<li class="button"><a class="disabled" href="#0">上一頁</a></li>
<li><a class="current" href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">下一頁</a></li>
</ul>
</nav>

CSS

首先，我們將分頁條居中，并設置寬度，間距等。然后設置上一頁和下一頁始終顯示，而數字頁碼則在小屏幕上如手機上會隱藏起來。還可以設置頁碼文字大小以及點擊效果。

nav[role="navigation"] {
text-align: center;
}
.cd-pagination {
width: 90%;
max-width: 768px;
margin: 2em auto 2em;
text-align: center;
}
.cd-pagination li {
/* 小屏幕上隱藏數字 */
display: none;
margin: 0 .2em;
}
.cd-pagination li.button {
/* 顯示上一頁和下一頁按鈕 */
display: inline-block;
}
.cd-pagination a, .cd-pagination span {
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* 設置按鈕大小 */
padding: .6em .8em;
font-size: 1rem;
}
.cd-pagination a {
border: 1px solid #e6e6e6;
border-radius: 0.25em;
}
.no-touch .cd-pagination a:hover {
background-color: #f2f2f2;