DDR爱好者之家

纯CSS制作自适应分页条附源码下载
站长资源 2024/11/23 佚名
22 1538
DDR爱好者之家 Design By 杰米

分页条是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; 
} 
.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制作自适应分页条附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米