css实现的漂亮的分页效果代码(橘黄色与蓝色)

下面是CSS实现漂亮的分页效果的代码攻略。

准备工作

在开始之前，需要准备以下素材：

1. 分页的HTML结构代码如下:

<div class="paging">
  <ul class="page-list">
    <li class="page-item"><a href="#">上一页</a></li>
    <li class="page-item active"><a href="#">1</a></li>
    <li class="page-item"><a href="#">2</a></li>
    <li class="page-item"><a href="#">3</a></li>
    <li class="page-item"><a href="#">4</a></li>
    <li class="page-item"><a href="#">5</a></li>
    <li class="page-item"><a href="#">下一页</a></li>
  </ul>
</div>

1. 两种颜色的CSS样式，代码如下:

.paging{
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-list{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-item{
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
}
.page-item a{
  display: block;
  padding: 8px 12px;
  color: #333;
  background-color: #f5f5f5;
  border-radius: 4px;
  text-decoration: none;
}
.page-item a:hover{
  background-color: #ccc;
}
.page-item.active a{
  color: #fff;
  background-color: #007bff;
}

实现过程

1. 首先，调整HTML结构中.page-list的属性设置，把 flex-wrap: wrap; 加入样式中，使得默认的横排分页变成纵向分布。

.page-list{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; //新增纵向分布属性
  list-style: none;
  margin: 0;
  padding: 0;
}

1. 接下来设置基础样式，如.page-item , 为 .page-item 标签添加 display: inline-block; 属性为行内块状，这样就可以让多个分页按横向排列了。同时，margin-right: 10px; 属性调整间隙为10px。

.page-item{
  display: inline-block; //新增display属性
  margin-right: 10px; //调整间隙
  font-size: 14px;
}

1. 对鼠标经过的状态和按钮的默认状态进行设置，为.page-item a标签添加属性值为hover的样式。并修改默认的按钮样式，为.page-item a添加更为漂亮的样式。

.page-item a{
  display: block;
  padding: 8px 12px;
  color: #333;
  background-color: #f5f5f5; //白色背景
  border-radius: 4px;
  text-decoration: none;
}

.page-item.active a{
  color: #fff;
  background-color: #007bff; //蓝色背景
}

.page-item a:hover{
  background-color: #ccc; //鼠标触碰变成灰色
}

1. 最后，更改当前分页项的默认状态样式。为了标识当前页面，为需要显示为当前分页项的.page-item标签添加.active，并为该标签添加样式属性，修改为绿色背景。

.page-item.active a{
  color: #fff;
  background-color: #007bff;
}

示例1 运用上述CSS代码实现橘黄色分页

1. 首先需要修改多个地方的背景颜色。这里默认第一个分页按钮为当前选中按钮，所以首先将第一个按钮模拟成“当前”按钮的效果，将.page-item.active a中的蓝色颜色修改成橘黄色，并在.page-item.active中添加上background-color: #FFB90F;属性样式：

.page-item.active a{
  color: #fff;
  background-color: #FFB90F; //橘黄色背景
}

.page-item.active{
  background-color: #FFB90F; //橘黄色背景
}

1. 接下来，连带着其他地方的默认样式也进行修改，将原本默认的灰和蓝色统一进行修改：

.page-item a{
  display: block;
  padding: 8px 12px;
  color: #333; //字体黑色
  background-color: #fff; //白色背景
  border-radius: 4px;
  text-decoration: none;
}

.page-item a:hover{
  background-color: #FFB90F; //鼠标触碰变成橘黄色
}

1. 最后，代码完整展示如下：

.paging{
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-list{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-item{
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
}
.page-item a{
  display: block;
  padding: 8px 12px;
  color: #333;
  background-color: #fff; //白色背景
  border-radius: 4px;
  text-decoration: none;
}
.page-item a:hover{
  background-color: #FFB90F; //鼠标触碰变成橘黄色
}
.page-item.active a{
  color: #fff;
  background-color: #FFB90F; //橘黄色背景
}
.page-item.active{
  background-color: #FFB90F; //橘黄色背景
}

示例2 运用上述CSS代码实现蓝色分页

1. 同样以第一个按钮为当前已选中按钮，样式标识符修改如下：

.page-item.active a{
  color: #fff;
  background-color: #007bff; //蓝色背景
}

.page-item.active{
  background-color: #007bff; //蓝色背景
}

1. 更改默认颜色，将原本默认的灰和蓝色统一进行修改：

.page-item a{
  display: block;
  padding: 8px 12px;
  color: #333;
  background-color: #f5f5f5; //白色背景
  border-radius: 4px;
  text-decoration: none;
}

.page-item a:hover{
  background-color: #007bff; //鼠标触碰变成蓝色
}

1. 最后，代码完整展示如下：

.paging{
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-list{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-item{
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
}
.page-item a{
  display: block;
  padding: 8px 12px;
  color: #333;
  background-color: #f5f5f5; //白色背景
  border-radius: 4px;
  text-decoration: none;
}
.page-item a:hover{
  background-color: #007bff; //鼠标触碰变成蓝色
}
.page-item.active a{
  color: #fff;
  background-color: #007bff; //蓝色背景
}
.page-item.active{
  background-color: #007bff; //蓝色背景
}

以上两个示例均可在同一网页中设置，通过为对应的.page-list和.page-item的类名进行设置，在HTML代码里面指定对应的.paging的外层元素即可。