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 样式分页，包括display、padding和list-styles。
.simple-pagination {
display: flex;
list-style: none;
padding: 0;
} 第 3 步:分页链接样式
您可以设置各个分页链接的样式（<a> 元素）来控制它们的外观，例如它们的color、padding 和 text-decoration。
.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">Yxjc123</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 分页
以下示例演示了带有上一个和下一个按钮的简单分页组件h2>
以下示例演示了带有上一个和下一个按钮的简单分页组件 -
<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="#">Yxjc123</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>