css制作页码

使用纯CSS制作页码

HTML结构需包含页码容器和页码项，例如：

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

基础样式设置：

.pagination {
  display: inline-block;
  margin: 20px 0;
}

.pagination a {
  color: #333;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  margin: 0 4px;
}

添加交互效果

悬停和激活状态样式：

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

禁用按钮样式：

.pagination a.disabled {
  pointer-events: none;
  opacity: 0.6;
}

圆角样式设计

为页码添加圆角效果：

.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;
}

响应式页码布局

针对小屏幕设备的调整：

@media screen and (max-width: 600px) {
  .pagination a {
    padding: 6px 10px;
    margin: 0 2px;
  }
}

分页导航动画效果

添加过渡动画增强用户体验：

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

高级样式定制

使用CSS变量方便主题更换：

:root {
  --pagination-active: #4CAF50;
  --pagination-hover: #f5f5f5;
}

.pagination a.active {
  background-color: var(--pagination-active);
}