怎么用CSS制作自適應(yīng)分頁條

本篇內(nèi)容主要講解“怎么用CSS制作自適應(yīng)分頁條”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用CSS制作自適應(yīng)分頁條”吧!

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

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

HTML結(jié)構(gòu)

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

<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

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

nav[role="navigation"] {  text-align: center; } .cd-pagination {  width: 90%;  max-width: 768px;  margin: 2em auto 2em;  text-align: center; } .cd-pagination li {  /* 小屏幕上隱藏數(shù)字 */  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;  /* 設(shè)置按鈕大小 */  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; } .cd-pagination a:active {  /* 點(diǎn)擊效果 */  -webkit-transform: scale(0.9);  -moz-transform: scale(0.9);  -ms-transform: scale(0.9);  -o-transform: scale(0.9);  transform: scale(0.9); } .cd-pagination a.disabled {  /* 按鈕不可用 */  color: rgba(46, 64, 87, 0.4);  pointer-events: none; } .cd-pagination a.disabled::before, .cd-pagination a.disabled::after {  opacity: .4; } .cd-pagination .button:first-of-type a::before {  content: '0ab  '; } .cd-pagination .button:last-of-type a::after {  content: ' 0bb'; } .cd-pagination .current {  /* 當(dāng)前頁碼 */  background-color: #64a281;  border-color: #64a281;  color: #ffffff;  pointer-events: none; } @media only screen and (min-width: 768px) {  .cd-pagination li {    display: inline-block;  } } @media only screen and (min-width: 1170px) {  .cd-pagination {    margin: 4em auto 8em;  } }

此外，我們使用svg制作箭頭圖標(biāo)，如果你要使用左右箭頭代替上一頁和下一頁的按鈕文字，則可以使用以下代碼。

.cd-pagination.custom-buttons .button a {  width: 40px;  overflow: hidden;  white-space: nowrap;  text-indent: 100%;  color: transparent;  background-image: url("../img/cd-icon-arrow.svg");  background-repeat: no-repeat;  background-position: center center; } .cd-pagination.custom-buttons .button:last-of-type a {  -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg);  -ms-transform: rotate(180deg);  -o-transform: rotate(180deg);  transform: rotate(180deg); }

到此，相信大家對“怎么用CSS制作自適應(yīng)分頁條”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！