分页css样式-CSS自适应分页

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文介绍您用纯CSS制作一个漂亮的分页栏，可以适应各种PC和手机等联通终端屏幕。 开发者可以下载源码并自行修改CSS代码，定制自己项目的样式。

HTML结构

分页结构由两侧的上一页和下一页按钮以及中间的数字页脚组成。 我们用一个元素包装一个无序列表 (ul.cd-pagination)。 在无序列表中，我们为上一页和下一页按钮添加.button样式分页css样式，并使用a.current样式来表示中间页码的当前页脚。 如果你想让页脚无缝分页css样式，请在 ul 中添加 .no-space 样式。 代码结构如下：

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

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: '0ab  '; 
} 
.cd-pagination .button:last-of-type a::after { 
  content: ' 0bb'; 
} 
.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); 
}

原文地址：http://www.duxinzhe.cn/web/HTML_CSS/84.html