总结介绍如何通过使用 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. HDU 1260 Tickets （动态规划）

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. 查找担保圈-step4-提取s1中担保圈路径中的成员

    USE [test] GO /****** Object: StoredProcedure [dbo].[p02_get_group_member] Script Date: 2019/7/8 14: ...

  3. Git及码云学习总结

    前言 一.Git是一个版本管理工具软件. 二.windows 系统的使用: 1.git软件的安装:https://git-scm.com/downloads mac系统是自带的不用安装 windows ...

  4. sublime text3 注册码 (Version 3.0)

    -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...

  5. FFmpeg4.0笔记：封装ffmpeg的音频重采样功能类CSwr

    Github https://github.com/gongluck/FFmpeg4.0-study/tree/master/Cff CSwr.h /************************* ...

  6. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  7. C# using用法之一（命名空间相关）

    通过using关键字可以引入命名空间 using System; using System.Collections.Generic; using System.Linq; using System.T ...

  8. Git复习（十一）之常见命令用法

    创建版本库 git init 进入一个文件,执行该命令此时目录下多了一个.git的目录,这个目录是Git来跟踪管理版本库的,没事千万不要手动修改这个目录里面的文件,不然改乱了,就把Git仓库给破坏了. ...

  9. SQL这样干，你就是给自己刨坑.....

    SQL是作为一个程序员接触得非常多的一种语言,但是,很多时候,我们会发现,有些SQL的执行效率异常的差,造成了数据库的负担.我们通过分析这些有问题的SQL,就可以发现很多我们平时在写SQL的时候忽略的 ...

  10. web-CSS居中大全

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...