欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS制作自適應分頁條附源碼下載

  發(fā)布時間：2017-07-05 15:05:03   作者：佚名   我要評論
分頁條是web開發(fā)中常用的前端組件之一，它能將數據分批次展示給用戶。下面通過本文給大家分享純CSS制作自適應分頁條的知識，感興趣的的朋友一起看看吧

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

查看演示               下載源碼

本文給大家介紹用純CSS制作一款漂亮的分頁條，可以適應各種PC和手機等移動端屏幕，開發(fā)者可以下載源碼自行更改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; 
} 
.cd-pagination a:active { 
  /* 點擊效果 */ 
  -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: '\00ab  '; 
} 
.cd-pagination .button:last-of-type a::after { 
  content: ' \00bb'; 
} 
.cd-pagination .current { 
  /* 當前頁碼 */ 
  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制作箭頭圖標，如果你要使用左右箭頭代替上一頁和下一頁的按鈕文字，則可以使用以下代碼。

.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制作自適應分頁條附源碼下載，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

相關文章

最新評論