CSS - 分页

上一页
下一页

CSS 分页是一种为网站创建页码的技术，它允许用户轻松地在大量内容之间导航。这是一种简单有效的方法来组织您的网站并使其更加用户友好。

步骤 1：添加 HTML 标记

要在 HTML 中创建分页元素，可以使用 <div> 或 <ul> 元素。该元素将包含内容的每个页面的链接，以及可选的“上一步”和“下一步”链接。


<div class="simple-pagination">
	 	<a href="#">«</a>
	 	<a href="#">A</a>
	 	<a href="#">B</a>
	 	<a href="#">C</a>
	 	<a href="#">D</a>
	 	<a href="#">E</a>
	 	<a href="#">»</a>
</div>

步骤 2：定义 CSS 类

指定分页的 CSS 样式，包括显示、填充和列表样式。


.simple-pagination {
	 	display: flex;
	 	list-style: none;
	 	padding: 0;
}

步骤 3：分页链接样式

您可以设置各个分页链接（<a> 元素）的样式以控制其外观，例如其颜色、填充和文本装饰。


.simple-pagination a {
	 	text-decoration: none;
	 	padding: 12px;
	 	color: black;
}

CSS 简单分页

以下示例演示了一个简单的分页元素，该元素显示为 flexbox 容器 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 12px;
	 	 	 color: black;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 活动和可悬停分页

您可以通过以下方式创建具有不同样式的分页元素：

  • 将 .active 类添加到当前页码。
  • 使用 ：hover 选择器将鼠标悬停在所有页面链接上时更改它们的颜色。

这是一个例子 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 圆角、活动和可悬停按钮

您可以通过添加 border-radius CSS 属性来创建具有圆形活动和悬停按钮的分页元素。

这是一个例子 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 border-radius: 8px;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 可悬停过渡效果

将鼠标悬停在分页链接上时，可以使用 transition 属性创建具有平滑过渡的分页元素。

这是一个例子 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 transition: background-color 0.4s;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 有边框分页

当您想要向分页链接添加边框时，您可以使用 CSS border 属性。

这是一个例子 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 transition: background-color 0.4s;
	 	 	 border: 2px solid blue;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 圆角边框

当您想要对分页链接的角进行圆角处理时，可以使用 CSS border-radius 属性。

这是一个例子 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 transition: background-color 0.4s;
	 	 	 border: 2px solid blue;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:first-child {
	 	 	 border-top-left-radius: 20px;	
	 	 	 border-bottom-left-radius: 20px;	
	 	}
	 	.simple-pagination a:last-child {
	 	 	 border-top-right-radius: 20px;	
	 	 	 border-bottom-right-radius: 20px;	
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

链接之间的 CSS 空间

以下示例演示如何使用 CSS margin 属性在分页组件中的每个链接周围创建空间 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 transition: background-color 0.4s;
	 	 	 border: 2px solid blue;
	 	 	 margin: 2px;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

以下示例演示了如何使用 CSS column-gap 属性在分页组件中的每个链接周围创建一个空间 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	 	 column-gap: 2px;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 transition: background-color 0.4s;
	 	 	 border: 2px solid blue;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 分页大小

下面的示例演示 font-size 属性可用于设置链接中文本的大小。


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 border: 2px solid blue;
	 	 	 font-size: 20px;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 居中分页

当您想要在分页组件中居中链接时，您可以使用 justify-content CSS 属性。

这是一个例子 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	 	 justify-content: center;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 transition: background-color 0.4s;
	 	 	 border: 2px solid blue;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#">«</a>
	 	 	 <a href="#" class="active-link">A</a>
	 	 	 <a href="#">B</a>
	 	 	 <a href="#">C</a>
	 	 	 <a href="#">D</a>
	 	 	 <a href="#">E</a>
	 	 	 <a href="#">»</a>
	 	</div>
</body>
</html>

CSS 分页与下一个上一个按钮

以下示例演示了一个简单的分页组件，其中包含“上一个”和“下一个”按钮 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 list-style: none;
	 	 	 padding: 0;
	 	 	 margin: 10px;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 transition: background-color 0.4s;
	 	 	 border: 2px solid blue;
	 	}
	 	.simple-pagination a.active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
	 	.simple-pagination a:hover:not(.active-link) {
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div class="simple-pagination">
	 	 	 <a href="#" class="active-link">Tutorialspoint</a>
	 	 	 <a href="#">Home</a>
	 	 	 <a href="#">Articles</a>
	 	 	 <a href="#">Courses</a>
	 	 	 <a href="#">Settings</a>
	 	</div>
	 	<div class="simple-pagination">
	 	 	 <a href="#" class="prev-next">< Previous</a>
	 	 	 <a href="#" class="prev-next">Next ></a>
	 	</div>
</body>
</html>

使用面包屑的 CSS 分页

以下示例演示了一个简单的分页组件，其中包含“上一个”和“下一个”按钮 -


<html>
<head>
<style>
	 	ul.breadcrumb-pagination {
	 	 	 padding: 10px;
	 	 	 list-style: none;
	 	 	 background-color: pink;
	 	}
	 	ul.breadcrumb-pagination li {
	 	 	 display: inline-block;
	 	}
	 	ul.breadcrumb-pagination li a {
	 	 	 color: blue;
	 	}
	 	ul.breadcrumb-pagination li+li:before {
	 	 	 padding: 10px;
	 	 	 content: "/\00a0";
	 	}
</style>
</head>
<body>
	 	<ul class="breadcrumb-pagination">
	 	 	 <li><a href="#">Tutorialspoint</a></li>
	 	 	 <li><a href="#">CSS Pagination</a></li>
	 	 	 <li class="active-link">CSS Pagnation With Breadcrumb</li>
	 	</ul>
</body>
</html>

带列表的 CSS 分页

您还可以使用无序列表 （<ul>） 和列表项 （<li>） 来创建分页。

这是一个例子 -


<html>
<head>
<style>
	 	.simple-pagination {
	 	 	 display: flex;
	 	 	 padding: 0;
	 	 	 list-style: none;
	 	}
	 	.simple-pagination li {
	 	 	 margin: 5px;
	 	}
	 	.simple-pagination a {
	 	 	 text-decoration: none;
	 	 	 padding: 8px 12px;
	 	 	 color: #333;
	 	 	 border: 2px solid blue;
	 	}
	 	.simple-pagination a:hover {
	 	 	 background-color: pink;
	 	}
	 	.simple-pagination .active-link {
	 	 	 background-color: violet;
	 	 	 color: white;
	 	}
</style>
</head>
<body>
	 	<ul class="simple-pagination">
	 	 	 <li><a href="#">«</a></li>
	 	 	 <li><a href="#" class="active-link">A</a></li>
	 	 	 <li><a href="#">B</a></li>
	 	 	 <li><a href="#">C</a></li>
	 	 	 <li><a href="#">D</a></li>
	 	 	 <li><a href="#">E</a></li>
	 	 	 <li><a href="#">»</a></li>
	 	</ul>
</body>
</html>
打印本页
上一页
下一页