CSS Pagination

2025 年 3 月 26 日 | 阅读 5 分钟

CSS 分页是一项非常有用的技术，用于在网站主页上对不同页面进行索引。如果您的网站有很多页面，您必须在每个页面上添加某种分页。

以下是分页的不同类型

基本分页

这是最简单的分页。您必须将 pagination 类添加到 <ul> 元素才能实现此分页。

请看这个例子

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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>Basic Pagination</h2>
<ul class="pagination">
  <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>
</ul>
</body>
</html>

带箭头的基本分页

当您有很多页面时，使用此分页。它允许您使用箭头来跳转到上一页和下一页。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<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>Basic Pagination with arrow</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>
<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: brown;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</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>
<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: brown;
    color: white;
    border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Rounded Active and Hover Buttons</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>

带边框的分页

在此分页中，您使用 border 属性为分页添加边框。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<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: 1px solid black;
}
ul.pagination li a.active {
    background-color: brown;
    color: white;
    border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Bordered Pagination</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>

圆形边框分页

此分页方法用于为分页的第一个和最后一个链接添加圆角边框。

请看这个例子

 <!DOCTYPE html>
<html>
<head>
<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: 1px solid black;
}
.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;
}
ul.pagination li a.active {
    background-color: brown;
    color: white;
    border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Pagination with Rounded Borders</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>

分页间距

margin 属性用于在分页链接之间创建间距。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<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: 1px solid black;
    margin: 0 4px;
}
ul.pagination li a.active {
    background-color: brown;
    color: white;
    border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Space Between Pagination</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>

分页大小

您可以使用 font-size 属性更改分页的大小。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<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: 1px solid black;
    font-size: 22px;
}
ul.pagination li a.active {
    background-color: brown;
    color: white;
    border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<h2>Pagination Size</h2>
<p>Change the font-size property to make the pagination smaller or bigger.</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>

居中分页

您需要将一个容器元素（例如

）包裹在它周围，并使用 text-align:center 将分页居中显示。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<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: 1px solid #ddd;
}
ul.pagination li a.active {
    background-color: brown;
    color: white;
    border: 1px solid grey;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
div.center {text-align: center;}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="center">
  <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>
</div>
</body>
</html>

您可以为上一页/下一页按钮以及导航添加分页。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<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: 1px solid black;
    font-size: 18px;
}
ul.pagination li a.active {
    background-color: brown;
    color: black;
    border: 1px solid black;
}
ul.pagination li a:hover:not(.active) {background-color: lightpink;}
</style>
</head>
<body>
<p><strong>Next/Previous buttons:</strong></p>
<ul class="pagination">
  <li><a href="#">?</a></li>
  <li><a href="#">?</a></li>
</ul>
<p><strong>Navigation pagination:</strong></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>
<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>JavaTpoint</h2>
<ul class="breadcrumb">
  <li><a href="#">Java</a></li>
  <li><a href="#">Oracle</a></li>
  <li><a href="#">PHP</a></li>
  <li>AngularJS</li>
</ul>
<p><strong>Note:</strong>This is an example of Breadcrumb pagination.</p>
</body>
</html>

下一主题CSS Grid

CSS Pagination

基本分页

带箭头的基本分页

活动/当前链接和可悬停分页

圆形活动和可悬停分页

带边框的分页

圆形边框分页

分页间距

分页大小

居中分页

上一页/下一页和导航分页

面包屑分页

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Pagination

基本分页

带箭头的基本分页

活动/当前链接和可悬停分页

圆形活动和可悬停分页

带边框的分页

圆形边框分页

分页间距

分页大小

居中分页

上一页/下一页和导航分页

面包屑分页

相关帖子

CSS Transition

CSS pseudo-classes

CSS FlexBox

flex-flow property

flex-shrink property

CSS masking

CSS Loader

CSS Tooltips

CSS 2D Transforms

CSS @keyframes rule

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器