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的外层元素即可。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css实现的漂亮的分页效果代码(橘黄色与蓝色) - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

    要实现带渐变淡入淡出并向右依次展开的多级菜单效果,我们需要用到jQuery库的一些函数和特性。下面,我将会提供一个详细的攻略,使您可以轻松地实现菜单效果。 步骤一:创建HTML结构 首先,我们需要创建一个HTML结构来存储菜单内容。假设我们有一个三级菜单,下面是一个典型的HTML结构: <div class="menu"> &…

    css 2023年6月10日
    00
  • CSS 返回顶部代码示例

    以下是“CSS 返回顶部代码示例”的完整攻略: 第一步:添加HTML 首先,在需要添加返回顶部按钮的页面中添加HTML代码。HTML包括一个容器,其中包含要在页面左下角显示的“返回顶部”按钮。 例如: <!DOCTYPE html> <html> <head> <title>我的网站</title>…

    css 2023年6月10日
    00
  • 使用CSS绘制基础的对话框图案的代码示例

    以下是使用CSS绘制基础的对话框图案的详细攻略: 1. 确定HTML结构 在绘制对话框之前,首先需要在HTML中给对话框定义一个合适的结构,这有利于后续的CSS实现。常见的对话框结构如下: <div class="dialog"> <div class="header"> <h3>对…

    css 2023年6月10日
    00
  • js 右侧浮动层效果实现代码(跟随滚动)

    下面是详细讲解“js 右侧浮动层效果实现代码(跟随滚动)”的完整攻略。 概述 右侧浮动层效果是一种常见的网页设计方法,可以在页面中增加活力和美观度。本文将介绍如何利用 JavaScript 实现一个滚动时跟随的右侧浮动层效果。 实现步骤 HTML 在页面中添加一个右侧浮动层的 HTML 结构: <div class="right-float&…

    css 2023年6月10日
    00
  • div+css与xhtml+css分别是什么意思?

    div+CSS 和 XHTML+CSS 都是 Web 前端开发中常用的技术,用于实现网页的布局和样式。下面将详细讲解这两种技术的含义和使用方法。 1. div+CSS 是什么意思? div+CSS 是一种基于 div 元素和 CSS 样式的网页布局技术。div 元素是 HTML 中的一个块级元素,可以用于划分网页的不同区域,然后使用 CSS 样式来控制这些区…

    css 2023年5月18日
    00
  • 帝国cms常用标签调用方法(灵动标签和万能标签的调用方法)

    帝国 CMS 是一款功能强大的内容管理系统,通过使用其提供的标签可以快速地调用各种内容,在实际网站开发中有着广泛应用。其中灵动标签和万能标签是最为常用的两种标签。本文将详细讲解这两种标签的调用方法。 灵动标签的调用方法 灵动标签主要用于动态调用栏目、文章等信息。下面介绍一些常用的灵动标签的调用方法。 调用栏目信息 {$categroy = implode(&…

    css 2023年6月10日
    00
  • css 定位应用实例

    下面是关于“CSS定位应用实例”的完整攻略。 概述 CSS定位是指,使用CSS样式表中的定位属性来控制HTML元素相对于其父元素的位置。常见的定位属性有:position、top、bottom、left、right等。在Web开发中,定位应用十分普遍,特别是在响应式设计中,通过使用CSS定位可以实现具有特定尺寸、位置和排列的页面元素。下面,我们将讨论CSS定…

    css 2023年6月9日
    00
  • 浅析CSS中的4种引入方式及优先级

    当我们开发网站时,CSS样式表是必不可少的一部分。在CSS中,有4种不同的方式来引入样式表,即内部样式表、外部样式表、行内样式和导入样式。每种引入方式都有其优缺点和适用场景,而优先级则是CSS样式表中重要的概念。本文将详细讲解CSS中的4种引入方式及其优先级。 内部样式表 内部样式表是嵌入在HTML文档中的样式表,通常放在标签中的 标签中。这种方式适用于只需…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部