分页CSS样式组件

分页组件的 CSS 样式挺实用的，尤其是那种简洁清爽的风格，放到项目里几乎不用怎么改，套上去就能用。基本结构也不复杂，一组页码按钮，加个上下页，最多再加个“第一页”或者“一页”就齐活了。

布局上直接用Flex搞居中对齐，配点边框、圆角，看着就舒服。鼠标悬停时的交互也有了，背景颜色浅浅一变，体验还挺细腻的。想高亮当前页？加个.active样式就够了，视觉重点马上出来。

像下面这种代码，拷过去粘上就能跑：

.pagination {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.pagination li {
  margin: 0 5px;
}
.pagination a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.pagination a:hover {
  background-color: #f5f5f5;
}
.pagination .active a {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

屏幕小的时候分页太挤？加几行媒体查询，像这样：

@media (max-width: 768px) {
  .pagination {
    flex-direction: column;
  }
}

嗯，适配就了。要是你想加点高级功能，比如每页几条、跳转到指定页之类的，就得用点JavaScript，监听事件、改 URL 参数啥的，但逻辑也不复杂。

如果你经常做内容展示型的网站，比如新闻列表、电商商品页，这种分页样式真的还蛮好用的。要是你想了解更复杂的页码，也可以看看《部分页码分页显示》那篇文章，讲得还挺细。

，这套分页 CSS 算是比较全、比较稳的样板了，用来做基础样式合适。你可以直接用，也可以按需求改一改，拓展点交互或响应式功能都行。