【web组件库系列】纯CSS实现典型网页数据分页器
使用CSS实现分页器
CSDN：jcLee95
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/117000806
目 录
1. 基本实现方案
- 让无序列表中所有的项目间组成行内元素
- 让每一个列表项目拥有方形背景
- 为当前页标签绘色
- 光标移入颜色变灰，光标移除颜色恢复
2. 进一步完善
上/下一页文字- 圆角、光标移入变换时间
- 添加一个背景色
- 完整的代码
【提示】：本文中’Out[]:'代表代码对应的运行结果。
1. 基本实现方案
将分页器看作是一个无序列表，页面项看作是无序列表项目，则一个最原始的分页器（不带样式）实现如下：
<ul class="pager"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">»</a></li>
</ul>
Out[]:
- «
- 1
- 2
- 3
- »
- 以上这个分页器有3个页面，分别是1，2，3。
- “«”和“»”是为分页数目过多时预留的，即假设有数据量决定的页面有100页，当我们在58页时，显示的分页为57、58、59，这是“«”表示页面链接到57页的前一页，即56页。“»”同理，为60页。
- 由于这里我们只讨论CSS样式，不关系“«”和“»”是否出现和什么时候出现的逻辑。
让无序列表中所有的项目间组成行内元素
ul.pager li {display: inline; /* 行内元素 */
}ul.pager {display: inline-block; /* 行内块状元素 */padding: 0;margin: 0;
}Out[]:
这就是一个最简单的分页器了。但这个分页器似乎并不好看。好看的分页器，如百度大概是这个样子的：
让每一个列表项目拥有方形背景
ul.pager li a {color: #000; /* 字体颜色 */float: left; /* 从左向右浮动 */padding: 12px 21px; /* 内边距 */margin:3px; /* 外边距 */text-decoration: none; /* 清除文字修饰 */border: 1px solid #000; /* 边框颜色 */
}
Out[]:
为当前页标签绘色
ul.pager li a.active {background-color: #4E6EF2;color: white;border: 1px solid #4E6EF2;
}
Out[]:
光标移入颜色变灰，光标移除颜色恢复
ul.pager li a:hover:not(.active) {background-color: #cdcdcd;
}
光标移入3时：
光标移出3时：
这样，就实现了一个漂亮的CSS分页器
2. 进一步完善
上/下一页文字
这里主要是参考百度搜索的分页器看起来的样子进行调整。我们可以将左右部分使用文字：
<div class="bk"><ul class="pager"><li><a href="#"><上一页</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li><a href="#">下一页></a></li></ul>
</div>
圆角、光标移入变换时间
ul.pager li a {color: #000; /* 字体颜色 */background-color: #fff; /* 背景颜色 */float: left; /* 从左向右浮动 */padding: 12px 18px; /* 内边距 */margin:9px; /* 外边距 */text-decoration: none; /* 清除文字修饰 */border-radius: 6.5px; /* 圆角 */transition: background-color .3s; /* 动画变换时间 */
}
添加一个背景色
由于各项目为白色，给个背景色：
.bk{height:66px;width: 900px;background-color: #F5F5F6;text-align:center
}
完整的代码
完整的代码如下：
<style>
ul.pager li {display: inline;}ul.pager {display: inline-block;padding: 0;margin: 0;
}ul.pager li a {color: #000; /* 字体颜色 */background-color: #fff; /* 背景颜色 */float: left; /* 从左向右浮动 */padding: 12px 18px; /* 内边距 */margin:9px; /* 外边距 */text-decoration: none; /* 清除文字修饰 */border-radius: 6.5px; /* 圆角 */transition: background-color .3s; /* 动画变换时间 */
}ul.pager li a:hover:not(.active) {background-color: #cdcdcd;
}ul.pager li a.active {background-color: #4E6EF2;color: white;border: 1px solid #4E6EF2;
}.bk{height:66px;width: 900px;background-color: #F5F5F6;text-align:center
}</style><div class="bk"><ul class="pager"><li><a href="#"><上一页</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li><a href="#">下一页></a></li></ul>
</div>
打开浏览器，可以看到：
【web组件库系列】纯CSS实现典型网页数据分页器相关推荐
- 【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...
- web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...
- 微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 组件库系列三：编写组件库文档
文章目录 vuepress介绍 创建文档工程 配置运行指令 vuepress浏览器自动更新 下载插件和依赖 npm/yarn link docs文件夹 .vuepress文件夹 可收缩代码块 效果展示 ...
- 组件库系列二：打包发布组件库
文章目录 打包组件 增加打包组件库指令 运行打包指令 默认引用路径 发布npm 创建.npmignore文件 设置package.json 编写README.md LISCENSE 切换到npm官方源 ...
- 微信小程序 MinUI 组件库系列之 abnor 异常流组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
- 微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 avatar 头像组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
最新文章
- 从Nginx绑定80端口学套接字编程
- 代码中的各种时间格式
- python下载不了-python3下载不了
- 【干货】移动APP安全测试要点解析
- java代码详细注释_java代码详细注释
- Javascript-7对象：字符串、时间
- HDU 5950——Recursive sequence
- 网格布局(Grid Layout)
- PICKIT 3 烧录hex文件
- MessageBox模态对话框[转]
- 搭建企业级Docker Registry -- Harbor
- Java锁--CyclicBarrier
- 服装制版师用软件代替手工_楚天都市报_多媒体报
- 图书销售管理系统数据库SQL应用编程 和 安全管理
- cecore.cls.php 08cms,08CMS产品库报价系统 v1.1 utf8版PHP CMS源码下载-华软网
- 试算平衡表示例图_科目汇总表代试算平衡表
- 对计算机的一点点看法
- 上传遥感图像在地图上自动加载到地图上
- StringBuffer去掉最后一个字符
- Serval的试卷答案（线段树）