/* 分页容器：控制分页的位置、上下间距 */
.page-pagination {
  text-align: center;
  /* 分页水平居中 */
  margin: 30px 0;
  /* 上下留间距 */
}

/* 重置分页ul的默认样式 */
.page-pagination .pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style: none;
  /* 去掉默认列表圆点 */
}

/* 分页的每个页码项 */
.page-pagination .pagination li {
  display: inline-block;
  /* 让页码横向排列 */
  margin: 0 3px;
  /* 页码之间的间距 */
}

/* 页码按钮（a/span通用样式） */
.page-pagination .pagination li a,
.page-pagination .pagination li span {
  display: inline-block;
  padding: 8px 14px;
  /* 按钮内边距（控制大小） */
  border: 1px solid #ddd;
  /* 按钮边框 */
  border-radius: 4px;
  /* 圆角 */
  color: #333;
  /* 文字颜色 */
  text-decoration: none;
  /* 去掉a标签下划线 */
  cursor: pointer;
  /* 鼠标悬浮变手型 */
  font-size: 14px;
}

/* 鼠标悬浮页码的效果 */
.page-pagination .pagination li a:hover {
  border-color: #af4425;
  /* 边框变主色 */
  color: #af4425;
  /* 文字变主色 */
}

/* 当前激活页的样式（比如图中的“3”） */
.page-pagination .pagination li.active span {
  background-color: #af4425;
  /* 背景主色 */
  border-color: #af4425;
  /* 边框主色 */
  color: #fff;
  /* 文字白色 */
  cursor: default;
  /* 不可点击 */
}

/* 禁用状态的样式（比如图中的“»”） */
.page-pagination .pagination li.disabled span {
  color: #999;
  /* 文字灰色 */
  border-color: #ddd;
  /* 边框浅灰 */
  background-color: #f5f5f5;
  /* 背景浅灰 */
  cursor: not-allowed;
  /* 禁用鼠标样式 */
}