怎么用CSS制作自适应分页条

本篇内容主要讲解“怎么用CSS制作自适应分页条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS制作自适应分页条”吧!

分页条是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: '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); }

到此，相信大家对“怎么用CSS制作自适应分页条”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！