当前位置：首页 > CSS

css样式制作页码

2026-02-13 08:31:55CSS

使用纯CSS制作页码

通过CSS的伪类和选择器可以实现简单的页码样式，适用于静态页面或少量页码展示。

.pagination {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.pagination a {
  display: block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}

.pagination a:hover {
  background-color: #f5f5f5;
}

.pagination .active a {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

结合HTML结构的基础页码

需要配合以下HTML结构使用：

css样式制作页码

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

带圆点效果的页码样式

使用CSS创建视觉上更吸引人的圆点分页器：

.dot-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

响应式页码设计

通过媒体查询适应不同屏幕尺寸：

css样式制作页码

@media (max-width: 600px) {
  .pagination a {
    padding: 6px 8px;
    font-size: 14px;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

动画过渡效果

为页码切换添加平滑的过渡效果：

.pagination a {
  transition: all 0.3s ease;
  transform: scale(1);
}

.pagination a:hover {
  transform: scale(1.05);
}

.pagination .active a {
  transform: scale(1.1);
}

使用CSS变量统一风格

定义CSS变量方便整体风格调整：

:root {
  --pagination-color: #007bff;
  --pagination-hover: #e9ecef;
  --pagination-active-text: #fff;
}

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