前端必知必会-CSS 分页

文章目录

• CSS 分页
• • 简单分页
  • 活动和可悬停分页
  • 圆角活动和可悬停按钮
  • 可悬停过渡效果
  • 带边框的分页
  • 圆角边框
  • 链接之间的空间
  • 分页大小
  • 居中分页
• 总结

CSS 分页

简单分页

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

示例

.pagination {
display: inline-block;
}

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

活动和可悬停分页

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

示例

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

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

圆角活动和可悬停按钮

如果您想要圆角“活动”和“悬停”按钮，请添加 border-radius 属性：

示例

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

.pagination a.active {
border-radius: 5px;
}

可悬停过渡效果

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

示例

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

带边框的分页

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

示例

.pagination a {
border: 1px solid #ddd; /* 灰色 */
}

圆角边框

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

示例

.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

链接之间的空间

提示：如果不想对页面链接进行分组，请添加边距属性：

示例

.pagination a {
margin: 0 4px; /* 0 表示顶部和底部。随意更改它 */
}

分页大小

使用 font-size 属性更改分页的大小：

示例

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

居中分页

要使分页居中，请使用 text-align:center 将容器元素（如 <div>）包裹在其周围

示例

.center {
text-align: center;
}

总结

本文介绍了CSS 分页的使用，如有问题欢迎私信和评论