用CSS创建分页的实例

总结介绍如何通过使用 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创建分页的实例的更多相关文章

Spring-Data-JPA尝鲜：快速搭建CRUD+分页后台实例
前言:由于之前没有接触过Hibernate框架,但是最近看一些博客深深被它的"效率"所吸引,所以这就来跟大家一起就着一个简单的例子来尝尝Spring全家桶里自带的JPA的鲜 Spr ...
Delphi调用SQL分页存储过程实例
Delphi调用SQL分页存储过程实例 (-- ::)转载▼ 标签: it 分类: Delphi相关 //-----下面是一个支持任意表的 SQL SERVER2000分页存储过程 //----分页存 ...
CSS学习摘要-定位实例
CSS学习摘要-定位实例注:全文摘自MDN-CSS定位实例列表消息盒子我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
巧妙使用CSS创建可以打印的页面
用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...
用CSS创建打印页面
用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...
工厂模式，根据ID创建对应的实例类
工厂模式,根据ID创建对应的实例类 // // main.cpp // TestCPP1 // // Created by bianchx on 15/4/27. // Copyright (c) 2 ...
C# 利用反射根据类名创建类的实例对象
“反射”其实就是利用程序集的元数据信息. 反射可以有很多方法,编写程序时请先导入 System.Reflection 命名空间. 1.假设你要反射一个 DLL 中的类,并且没有引用它(即未知的类型): ...
内部类访问外部类的变量必须是final吗，java静态方法中不能引用非静态变量，静态方法中不能创建内部类的实例
内部类访问外部类的变量必须是final吗? 如下: package com.java.concurrent; class A { int i = 3; public void shout() { cl ...
C# WinForm 单例模式（例：同一个窗体只创建一次实例）
//C# WinForm 单例模式(例:同一个窗体只创建一次实例) //打开窗体的事件: Form3 f = Form3.InstanceObject() ; //实例化窗体 f.Focus(); / ...

随机推荐

sql server2012中使用convert来取得datetime数据类型样式（全）
一.日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-02-01 08:02/*时间一般为getdate()函数或数据表里的字段*/ CONV ...
acmsguru
acmsguru 101 - Domino 要求每两个相邻的多尼诺骨牌相对的数字相同,即做一个一笔画 #include<bits/stdc++.h> using namespace std ...
spark教程(三)-RDD认知与创建
RDD 介绍 spark 最重要的一个概念叫 RDD,Resilient Distributed Dataset,弹性分布式数据集,它是 spark 的最基本的数据(也是计算)抽象. 代码中是一个抽象 ...
IdentitiServser4 + Mysql实现Authorization Server
Identity Server 4官方文档:https://identityserver4.readthedocs.io/en/latest/ 新建2个asp.net core 项目使用空模板 Aut ...
java web实现同一账号在不同浏览器不能同时登录
网上看了很多方法,个人也看了,自己也总结了几个比较常用的: 前提都是用session监听器,对session的创建与销毁进行监听一.在用户登录时保存该用户的状态有这几种保存方式: 1.保存到内存中( ...
PanDownload/AD16/MDK5/CAD2019及2007/Dev-C++/Office2016专业版软件安装包
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...
springboot(1)-基础篇
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
elastic 查询
1.match 查询 GET /_index/_search { "query": { "match": { " } } } 1.match 多条件查 ...
init container
init container与应用容器在本质上是一样的, 但它们是仅运行一次就结束的任务, 并且必须在成功执行完成后, 系统才能继续执行下一个容器, 可以用在例如应用容器启动前做一些初始化工作,当in ...
安装haroopad
安装haroopad 1)官网下载安装包 http://pad.haroopress.com/user.html 2)执行安装命令: sudo dpkg -i haroopad-v0.13.1-x64 ...

用CSS创建分页的实例

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

随机推荐

热门专题