总结介绍如何通过使用 CSS 来创建分页的实例。

㈠简单分页

如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

以下实例演示了如何使用 HTML 和 CSS 来创建分页：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>简单分页</title>

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}

</style>

</head>

<body>

<h2>简单的分页</h2>

<ul class="pagination">

  <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="#">»</a></li>

</ul>

</body>

</html>

效果图：

 

㈡点击及鼠标悬停分页样式

如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>点击及鼠标悬停</title>

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}

ul.pagination li a.active {

    background-color: #66FFFF;

    color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>点击及鼠标悬停分页样式</h2>

<p>移动鼠标的分页的数字上。</p>

<ul class="pagination">

  <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="#">»</a></li>

</ul>

</body>

</html>

效果图：

 

㈢圆角样式

使用 border-radius 属性为选中的页码来添加圆角样式:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>圆角样式</title>

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    border-radius: 5px;

}

ul.pagination li a.active {

    background-color: #99FF66;

    color: white;

    border-radius: 5px;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>圆角样式</h2>

<ul class="pagination">

  <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="#">»</a></li>

</ul>

</body>

效果图：

 

㈣鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>鼠标悬停过渡</title>

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition: background-color .3s;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>鼠标悬停过渡效果</h2>

<p>鼠标移动到分页码上。</p>

<ul class="pagination">

  <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="#">»</a></li>

</ul>

</body>

</html>

效果图：

 

㈤带边框分页

可以使用 border 属性来添加带边框分页:

大部分的代码如上面所示，我接下来的代码只放关键不同的地方。

ul.pagination li a {

    border: 1px solid #ddd; /* Gray */

}

效果图：

 

㈥分页间隔

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>分页间隔</title>

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition: background-color .3s;

    border: 1px solid #ddd;

    margin: 0 4px;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

    border: 1px solid #4CAF50;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>分页间隔</h2>

<ul class="pagination">

  <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="#">»</a></li>

</ul>

</body>

</html>

效果图：

 

㈦分页字体大小

ul.pagination li a {

    font-size: 22px;

}

㈧居中分页

如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：

div.center {

    text-align: center;

}

㈨更多实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>其他样式</title>

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition: background-color .3s;

    border: 1px solid #ddd;

    font-size: 18px;

}

ul.pagination li a.active {

    background-color: #eee;

    color: black;

    border: 1px solid #ddd;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<p>上一页，下一页按钮:</p>

<ul class="pagination">

  <li><a href="#">❮</a></li>

  <li><a href="#">❯</a></li>

</ul>

<p>分页导航:</p>

<ul class="pagination">

  <li><a href="#" class="active">Home</a></li>

  <li><a href="#">Link 1</a></li>

  <li><a href="#">Link 2</a></li>

  <li><a href="#">Link 3</a></li>

</ul>

</body>

</html>

效果图：

 

㈩面包屑导航

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>面包屑导航</title>

<style>

ul.breadcrumb {

    padding: 8px 16px;

    list-style: none;

    background-color: #eee;

}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {

    padding: 8px;

    color: black;

    content: "/\00a0";

}

ul.breadcrumb li a {color: green;}

</style>

</head>

<body>

<h2>面包屑导航</h2>

<ul class="breadcrumb">

  <li><a href="#">首页 </a></li>

  <li><a href="#">前端 </a></li>

  <li><a href="#">HTML 教程 </a></li>

  <li>HTML 段落</li>

</ul>

</body>

</html>

效果图：

 

注意：content: "/\00a0"是什么意思？

Unicode编码
‘/’的如何显示？
给后面的li的前面加个/。
CSS content中要使用Unicode，才可以在页面上显示你想要的特殊符号，不能使用html special chars code（比如 < ）。

用CSS创建分页的实例的更多相关文章

  1. Spring-Data-JPA尝鲜：快速搭建CRUD+分页后台实例

    前言:由于之前没有接触过Hibernate框架,但是最近看一些博客深深被它的"效率"所吸引,所以这就来跟大家一起就着一个简单的例子来尝尝Spring全家桶里自带的JPA的鲜 Spr ...

  2. Delphi调用SQL分页存储过程实例

    Delphi调用SQL分页存储过程实例 (-- ::)转载▼ 标签: it 分类: Delphi相关 //-----下面是一个支持任意表的 SQL SERVER2000分页存储过程 //----分页存 ...

  3. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  4. 巧妙使用CSS创建可以打印的页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  5. 用CSS创建打印页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  6. 工厂模式，根据ID创建对应的实例类

    工厂模式,根据ID创建对应的实例类 // // main.cpp // TestCPP1 // // Created by bianchx on 15/4/27. // Copyright (c) 2 ...

  7. C# 利用反射根据类名创建类的实例对象

    “反射”其实就是利用程序集的元数据信息. 反射可以有很多方法,编写程序时请先导入 System.Reflection 命名空间. 1.假设你要反射一个 DLL 中的类,并且没有引用它(即未知的类型): ...

  8. 内部类访问外部类的变量必须是final吗，java静态方法中不能引用非静态变量，静态方法中不能创建内部类的实例

    内部类访问外部类的变量必须是final吗? 如下: package com.java.concurrent; class A { int i = 3; public void shout() { cl ...

  9. C# WinForm 单例模式（例：同一个窗体只创建一次实例）

    //C# WinForm 单例模式(例:同一个窗体只创建一次实例) //打开窗体的事件: Form3 f = Form3.InstanceObject() ; //实例化窗体 f.Focus(); / ...

随机推荐

  1. java解析json字符串详解（两种方法）

    一.使用JSONObject来解析JSON数据官方提供的,所以不需要导入第三方jar包:直接上代码,如下 private void parseJSONWithJSONObject(String Jso ...

  2. 分层最短路（牛客第四场）-- free

    题意: 给你边权,起点和终点,有k次机会把某条路变为0,问你最短路是多长. 思路: 分层最短路模板题.题目有点坑(卡掉了SPFA,只能用dijkstra跑的算法). #include<iostr ...

  3. 3的倍数 或运算构造x（牛客第四场）-- triples I

    题意: 给你一个数,希望你能用最少的3的倍数或运算成它,让你输出答案. 思路: 进制%3有规律,1.2.4.8.16%3是1.2.1.2.1 ... 利用这一点分情况取一些位合成一些数就是答案了. # ...

  4. 从入门到自闭之Python闭包

    闭包 定义:在嵌套函数内,使用(非本层变量)非全局变量就是闭包 闭包必须是内层函数对外层函数的变量(非全局变量)的引用 函数执行完毕后,函数体内的空间自行销毁 def func(): a=1 def ...

  5. mongodb 数据操作(2)

    查询 db.student.find({}) 查询db.student.find({name:"李强1"}) 查询   条件查询 db.student.find({sex:&quo ...

  6. @Transactional spring事务回滚相关

    还可以设置回滚点,看下面 /** * 用户登录接口 * * * 1明确事务方法前的命名规则 * 2保证事务方法执行的时间尽可能的短,不允许出现循环操作,不允许出现RPC等网络请求操作 * 3不允许所有 ...

  7. Java Integer中的IntegerCache小记

      同事今天给我发了一个关于Java拆装箱的ppt,里面有这么一段代码 Integer c = Integer.valueOf(3); Integer d = Integer.valueOf(3); ...

  8. 无障碍开发（三）之ARIA aria-***属性值

    aria-***属性值

  9. qt webengineview 加载本地资源方式

    一.如果把资源添加到本地资源qrc库里了,请使用 ui->preview->setUrl(QUrl("qrc:/HelloWorld2.html")): 二.如果没有现 ...

  10. 帝国cms 常用标签汇总

    1.列表内容标签 [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] 2.分页标签 [!--show. ...