当前位置 博文首页 > jcLee95的博客：纯CSS实现典型网页数据分页器

最大化 缩小

    jcLee95的博客：纯CSS实现典型网页数据分页器

    作者：[db:作者] 时间：2021-09-18 15:48

    使用CSS实现分页器

    CSDN：jcLee95
    邮箱：291148484@163.com

    【提示】：本文中’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
    上一篇：jcLee95的博客：使用CSS实现网格+渐变背景色的Web页面背景
    下一篇：没有了