CSS - 分页：初学者指南

你好，未来的网页设计超级巨星们！今天，我们将深入CSS分页的奇妙世界。如果你之前从未编写过一行代码，也不用担心——我将成为你这次激动人心旅程中的友好向导。在本教程结束时，你将能够像专业人士一样创建出美丽且功能性的分页！

CSS - Pagination

什么是分页？

在我们开始之前，让我们先聊聊分页究竟是什么。想象你在阅读一本书。而不是将所有文本都挤在一个永无止境的页面上，它被分成易于管理的部分——这就是物理世界的分页。在网站上，分页帮助将长列表的内容（如搜索结果或博客文章）分成单独的页面。这就好比给用户一个虚拟的“翻页”按钮！

现在，让我们卷起袖子开始吧！

第一步：添加HTML标记

首先，我们需要创建分页的基本结构。把这个想象成我们设计的骨架。

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

在这个例子中，我们创建了一个带有类名"pagination"的<div>。里面有几个<a>标签（链接），代表我们的页码。«和»是左右箭头的特殊字符——很酷吧？

第二步：定义CSS类

现在我们有了骨架，让我们添加一些样式！我们将从一些基本的CSS开始，给我们的分页一个形状。

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

这段代码的作用如下：

display: inline-block; 使得我们的分页容器表现得像一个行内元素，但允许我们设置宽度和高度。
我们正在设置分页<div>内所有<a>标签的样式。
float: left; 使得我们的链接水平排列。
padding 在我们的文本周围提供了一些空间。
text-decoration: none; 去除了链接的下划线。

第三步：分页链接样式

让我们使我们的分页链接看起来更有趣！

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

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

这段代码做了两件很酷的事情：

它将“活动”页面（当前页面）设置为绿色背景和白色文本。
它为所有其他链接添加了悬停效果，当鼠标悬停时改变它们的背景颜色。

CSS简单分页

恭喜你！你刚刚创建了一个简单且功能性的分页。但为什么就此止步？让我们探索一些更激动人心的变体！

CSS活动与悬停分页

想要让你的分页更具交互性？试试这个：

.pagination a {
transition: background-color 0.3s;
}

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

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

transition属性在悬停时添加了一个平滑的颜色变化效果。就像魔法一样！

CSS圆角活动与悬停按钮

让我们给我们的按钮一些弧度：

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius 圆化了我们的按钮角落，而margin 在它们之间添加了一些空间。看起来不错吧？

CSS悬停过渡效果

想要添加一些活力？试试这个微妙的缩放效果：

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

现在，当鼠标悬停时，你的链接会稍微放大。就像它们在邀请被点击！

CSS带边框的分页

让我们添加一些边框，使我们的分页更加突出：

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

这行简单的代码在每个链接周围添加了一个浅灰色的边框。一个小小的改变就能带来如此大的不同！

CSS圆角边框

想要软化那些边框？让我们来圆化它们：

.pagination a {
border-radius: 50%;
}

这会将我们的方形按钮变成完美的圆形。多么酷炫！

CSS链接之间的空间

有时，我们需要更多的呼吸空间：

.pagination a {
margin: 0 4px;
}

这在每个链接之间添加了一个小间隙，使我们的分页感觉更加宽敞。

CSS分页大小

大小并不适合所有人。让我们学习如何调整大小：

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

尝试这些值，找到适合你设计的完美大小！

CSS居中分页

想要让你的分页在页面中间看起来很漂亮？

.pagination {
text-align: center;
}

这行简单的代码将整个分页块居中。

CSS带上下页按钮的分页

让我们添加一些导航按钮：

<div class="pagination">
<a href="#">&laquo; 上一个</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">下一个 &raquo;</a>
</div>

.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

这添加了“上一个”和“下一个”按钮，并对它们进行了不同的样式设置。

CSS带面包屑的分页

想要向用户展示他们在页面序列中的位置？试试这个：

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>第2页，共3页</p>
</div>

.pagination p {
margin-left: 10px;
display: inline-block;
}

这添加了一个文本指示器，显示当前页面和总页数。

CSS带列表的分页

最后，让我们尝试一下列表样式的分页：

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

这创建了一个干净、基于列表的分页布局。

至此，各位！你刚刚学习了CSS分页的方方面面。记住，掌握这些技术的关键在于练习。所以，继续尝试这些样式，混合搭配，创造你自己的独特分页设计。谁知道呢？你可能会创造出网页设计中的下一个大热门！

快乐编码，愿你的页面总是完美分页！


| 方法 | 描述 |
|------|------|
| 简单分页 | 带有最小样式的基本分页 |
| 活动与悬停分页 | 带有悬停效果的交互式分页 |
| 圆角活动与悬停按钮 | 带有圆角的分页按钮 |
| 悬停过渡效果 | 带有平滑过渡效果的悬停分页 |
| 带边框的分页 | 带有链接边框的分页 |
| 圆角边框 | 带有完全圆形按钮的分页 |
| 链接之间的空间 | 在链接之间添加额外空间的分页 |
| 分页大小 | 调整分页元素的大小 |
| 居中分页 | 在页面中间居中的分页 |
| 带上下页按钮的分页 | 添加导航按钮的分页 |
| 带面包屑的分页 | 在分页中包含页面指示器的分页 |
| 带列表的分页 | 使用无序列表创建的分页 |

Credits: Image by storyset