您现在的位置是：网站首页> 编程资料编程资料

纯CSS制作自适应分页条附源码下载_CSS教程_CSS_网页制作_

2023-11-05 282人已围观

简介分页条是web开发中常用的前端组件之一，它能将数据分批次展示给用户。下面通过本文给大家分享纯CSS制作自适应分页条的知识，感兴趣的的朋友一起看看吧

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

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

HTML结构

分页结构分别由两边的上一页和下一页两个按钮、以及中间的数字页码组成。我们用一个

元素来包裹一个无序列表（ul.cd-pagination）。在无序列表中，我们给上一页和下一页按钮加上.button样式，中间页面数字中，用a.current样式表示当前页码。如果想让页码间无空隙，则给ul添加.no-space样式，代码结构如下：

上一页
1
2
3
4
...
20
下一页

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

上一篇：css3 border-radius属性详解_css3_CSS_网页制作_

下一篇：详解纯CSS3制作的20种loading动效_css3_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

纯CSS制作自适应分页条附源码下载_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢