当前位置：首页 > CSS

css如何制作分页

2026-03-12 14:23:11CSS

使用纯CSS制作分页

通过CSS的伪类和选择器可以实现简单的分页效果。这种方法适合静态页面或少量分页的情况。

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

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

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

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

使用CSS Grid布局分页

CSS Grid可以创建更灵活的分页布局，适合响应式设计。

.pagination {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 5px;
  max-width: 500px;
}

.pagination a {
  text-align: center;
  padding: 10px;
  background: #f1f1f1;
  border-radius: 4px;
}

分页动画效果

为分页添加悬停和点击动画可以提升用户体验。

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

.pagination a:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.pagination a.active {
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

响应式分页设计

针对不同屏幕尺寸调整分页样式。

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

@media (max-width: 400px) {
  .pagination {
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  }
  .pagination a {
    padding: 4px 8px;
  }
}

分页样式变体

创建不同风格的分页设计。

css如何制作分页

/* 圆形分页 */
.pagination.circle a {
  border-radius: 50%;
}

/* 简约风格 */
.pagination.minimal a {
  border: none;
  background: transparent;
}

/* 卡片风格 */
.pagination.card a {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

这些方法提供了从基础到进阶的CSS分页实现方案，可以根据项目需求选择合适的样式和布局方式。