码库记事本

码库记事本

纯CSS制作自适应分页条附源码下载

小诸哥 0

分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Bootstrap,你想自己定制一个属于你自己项目的漂亮的分页条,那么请看本文。

本文给大家介绍用纯css制作一款漂亮的分页条,可以适应各种PC和手机等移动端屏幕,开发者可以下载源码自行更改css代码,定制属于你自己项目的风格。

HTML结构

分页结构分别由两边的上一页和下一页两个按钮、以及中间的数字页码组成。我们用一个<nav>元素来包裹一个无序列表(ul.cd-pagination)。在无序列表中,我们给上一页和下一页按钮加上.button样式,中间页面数字中,用a.current样式表示当前页码。如果想让页码间无空隙,则给ul添加.no-space样式,代码结构如下:

  1. <nav role="navigation">
  2.      <ul class="cd-pagination no-space">
  3.          <li class="button"><a class="disabled" href="#0">上一页</a>&lt;/li>
  4.          <li><a class="current" href="#0">1</a></li>
  5.          <li><a href="#0">2</a></li>
  6.          <li><a href="#0">3</a></li>
  7.          <li><a href="#0">4</a></li>
  8.          <li><span>...</span></li>
  9.          <li><a href="#0">20</a></li>
  10.          <li class="button"><a href="#0">下一页</a></li>
  11.      </ul>
  12. </nav>

CSS

首先,我们将分页条居中,并设置宽度,间距等。然后设置上一页和下一页始终显示,而数字页码则在小屏幕上如手机上会隐藏起来。还可以设置页码文字大小以及点击效果。

  1. nav[role="navigation"] {
  2.      text-align: center;
  3. }
  4. .cd-pagination {
  5.      width: 90%;
  6.      max-width: 768px;
  7.      margin: 2em auto 2em;
  8.      text-align: center;
  9. }
  10. .cd-pagination li {
  11.      /* 小屏幕上隐藏数字 */
  12.      display: none;
  13.      margin: 0 .2em;
  14. }
  15. .cd-pagination li.button {
  16.      /* 显示上一页和下一页按钮 */
  17.      display: inline-block;
  18. }
  19. .cd-pagination a, .cd-pagination span {
  20.      display: inline-block;
  21.      -webkit-user-select: none;
  22.      -moz-user-select: none;
  23.      -ms-user-select: none;
  24.      user-select: none;
  25.      /* 设置按钮大小 */
  26.      padding: .6em .8em;
  27.      font-size: 1rem;
  28. }
  29. .cd-pagination a {
  30.      border: 1px solid #e6e6e6;
  31.      border-radius: 0.25em;
  32. }
  33. .no-touch .cd-pagination a:hover {
  34.      background-color: #f2f2f2;
  35. }
  36. .cd-pagination a:active {
  37.      /* 点击效果 */
  38.      -webkit-transform: scale(0.9);
  39.      -moz-transform: scale(0.9);
  40.      -ms-transform: scale(0.9);
  41.      -o-transform: scale(0.9);
  42.      transform: scale(0.9);
  43. }
  44. .cd-pagination a.disabled {
  45.      /* 按钮不可用 */
  46.      color: rgba(46, 64, 87, 0.4);
  47.      pointer-events: none;
  48. }
  49. .cd-pagination a.disabled::before, .cd-pagination a.disabled::after {
  50.      opacity: .4;
  51. }
  52. .cd-pagination .button:first-of-type a::before {
  53.      content: '\00ab ';
  54. }
  55. .cd-pagination .button:last-of-type a::after {
  56.      content: ' \00bb';
  57. }
  58. .cd-pagination .current {
  59.      /* 当前页码 */
  60.      background-color: #64a281;
  61.      border-color: #64a281;
  62.      color: #ffffff;
  63.      pointer-events: none;
  64. }
  65. @media only screen and (min-width: 768px) {
  66.      .cd-pagination li {
  67.      display: inline-block;
  68.      }
  69. }
  70. @media only screen and (min-width: 1170px) {
  71.      .cd-pagination {
  72.      margin: 4em auto 8em;
  73.      }
  74. }

此外,我们使用svg制作箭头图标,如果你要使用左右箭头代替上一页和下一页的按钮文字,则可以使用以下代码。

  1. .cd-pagination.custom-buttons .button a {
  2.      width: 40px;
  3.      overflow: hidden;
  4.      white-space: nowrap;
  5.      text-indent: 100%;
  6.      color: transparent;
  7.      background-image: url("../img/cd-icon-arrow.svg");
  8.      background-repeat: no-repeat;
  9.      background-position: center center;
  10. }
  11. .cd-pagination.custom-buttons .button:last-of-type a {
  12.      -webkit-transform: rotate(180deg);
  13.      -moz-transform: rotate(180deg);
  14.      -ms-transform: rotate(180deg);
  15.      -o-transform: rotate(180deg);
  16.      transform: rotate(180deg);
  17. }

以上所述是小编给大家介绍的纯CSS制作自适应分页条附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

标签: 自适应 分页条