css如何制作分页

分页布局的基本结构

使用HTML创建分页的基本结构，通常由一组链接或按钮组成，包含页码、上一页和下一页按钮。

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

基础样式设计

通过CSS为分页添加基本样式，包括链接的布局、颜色和间距。

.pagination {
  display: inline-block;
}

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

高亮当前页码

使用.active类突出显示当前选中的页码。

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

悬停效果

添加悬停效果以提高交互性，当鼠标悬停在非活动链接上时改变背景颜色。

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

圆角样式

为第一个和最后一个链接添加圆角，使分页组件更美观。

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

禁用状态样式

为不可用的导航按钮（如第一页时的“上一页”）添加样式，通常设置为灰色且不可点击。

.pagination a.disabled {
  pointer-events: none;
  color: #ccc;
  background-color: #f8f8f8;
}

响应式分页

确保分页在不同屏幕尺寸下都能正常显示，可以通过媒体查询调整间距或字体大小。

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