CSS 分页范例

本章节我们介绍如何使用 CSS 来创建分页外观

如果我们的网站有很多的页面，就会用到分页功能为每个页面做导航，比如分类文章列表

下面的范例演示了如何使用 HTML 和 CSS 来创建分页

<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>
<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>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

运行范例 »

点击及鼠标悬停分页样式

我们先看一下最终效果

我们可以给当前页添加 .active CSS 类来创建当前页外观效果，可以使用 :hover CSS 选择器来创建鼠标悬停时的外观

ul.pagination li a.active { 
    background-color: #4CAF50;
    color: white;
}

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

运行范例 »

圆角样式

我们可以使用 CSS border-radius 属性给选中的当前页添加圆角效果，就像下面的范例一样

ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}

运行范例 »

鼠标悬停过渡效果

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

ul.pagination li a {
    transition: background-color .3s;
}

运行范例 »

带边框分页

我们还可以使用 CSS border 属性来添加带边框的分页

ul.pagination li a {
    border: 1px solid #ddd;
}

运行范例 »

圆角边框

还可以通过 CSS border-radius 在第一个分页链接和最后一个分页链接添加圆角

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {    
    border-top-right-radius: 5px;    
    border-bottom-right-radius: 5px;
}

运行范例 »

分页间隔

如果想让每一个分页之间有一点空隙，可以使用 CSS margin 属性

ul.pagination li a {
    margin: 0 4px;
}

运行范例 »

分页字体大小

如果想调整分页字体大小，可以使用 font-size 属性

ul.pagination li a {    font-size: 22px;}

运行范例 »

分页居中显示

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

html

<div style="text-align:center;">
<ul class="pagination2 border">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

css

div.center {    text-align: center;}

运行范例 »

html

<ul class="pagination ">
<li><a href="#">❮ 上一页</a></li>
<li><a href="#">❯ 下一页</a></li>
</ul>

CSS

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:hover:not(.active) {background-color: #ddd}

运行范例 »

分页导航

html

<ul class="pagination3 border">
<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>

css

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:hover:not(.active) {background-color: #ddd}

运行范例 »

面包屑导航

我们还可以创建一个面包屑导航

html

<ul class="breadcrumb">
  <li><a href="#">首页 </a></li>
  <li><a href="#">前端 </a></li>
  <li><a href="#">HTML 教程 </a></li>
  <li>HTML 段落</li>
</ul>

css

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";
}

运行范例 »

点击及鼠标悬停分页样式

圆角样式

鼠标悬停过渡效果

带边框分页

圆角边框

分页间隔

分页字体大小

分页居中显示

html

css

只有上一页下一页按钮

html

CSS

分页导航

html

css

面包屑导航

html

css

CSS 3 基础教程