CSS 分页示例

了解如何使用 CSS 创建响应式分页。

简单分页

如果您的网站有很多页面，您可能希望为每个页面添加某种分页：

活动和悬停分页

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

使用 .active 类，并使用:hover 选择器在将鼠标移到每个页面链接上时更改其颜色：

圆形活动和悬停按钮

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

添加 border-radius 如果您想要一个圆形的“活动”和“悬停”按钮，请设置以下属性：

悬停过渡效果

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

添加 transition 属性到页面链接上以创建悬停时的过渡效果：

有边分页

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

使用 border 属性为分页添加边框：

圆角边框

提示： 为分页中的第一个和最后一个链接添加圆角边框：

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

链接之间的空间

提示： 添加margin 如果不想对页面链接进行分组，请执行以下操作：

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

分页大小

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

使用 font-size 财产：

居中分页

要使分页居中，请包裹一个容器元素（如<div> ）用 text-align:center

更多示例

面包屑

• 家
• 图片
• 夏季 24
• 乌克兰

分页的另一种变体是所谓的“面包屑”：