用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(); / ...

随机推荐

CDH的mysql主从准备
参考: https://www.cnblogs.com/yinzhengjie/p/10371899.html https://www.sysit.cn/blog/post/sysit/CDH6.2. ...
Employee Free Time
We are given a list schedule of employees, which represents the working time for each employee. Each ...
tp5.1中redis使用
一.环境安装 1.下载redis,igbniary https://windows.php.net/downloads/pecl/releases/igbinary/ https://windows. ...
mysql添加索引造成的影响
尽管添加索引可以优化SQL语句的性能,但是添加索引的同时也会带来不小的开销.尤其是在有大量的索引的情况下. mysql添加索引造成的影响如下: 1.DML(数据操作语言)影响,在表上添加缩影会直接影响 ...
Windows账户管理
windows账户管理最近部署人员给我们提了一个需求,就是希望简化部署过程. 为了能够远程桌面控制终端电脑,他们需要为每台终端设置进行一些设置,例如创建用户名和密码,开启允许远程桌面设置,以及开机 ...
一般处理程序,ajax
一般处理程序调用session: 在.aspx.cs页中读写Session都是Session["***"]就可以获取或者写入.但是在一般处理程序也就是ashx页面中,再这样写的话, ...
第二篇 jQuery 选择器
2-1,2 table隔行变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
关于redis的几件小事(四)redis的过期策略以及内存淘汰机制
1.数据为什么会过期? 首先,要明白redis是用来做数据缓存的,不是用来做数据存储的(当然也可以当数据库用),所以数据时候过期的,过期的数据就不见了,过期主要有两种情况, ①在设置缓存数据时制定了过 ...
Postman简单的接口测试
DownloadPostmanApphttps://www.getpostman.com/downloads/ https://www.getpostman.com/downloads/canary ...
Linux操作系统的常用命令（一）
一.写随笔的原因:上次提到centos7.3安装mysql5.7的一些步骤,恰巧最近面试有碰到一些问LInux操作的常用操作的问题,想通过这篇文章MARK一下,不一定能够全,只是用的比较多的吧(lin ...

用CSS创建分页的实例

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

随机推荐

热门专题