css样式制作页码

使用纯CSS制作页码

HTML结构采用无序列表<ul>包裹页码项<li>，每个页码项包含链接<a>：

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

基础样式设置列表项横向排列并移除默认样式：

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: center;
}

页码项样式包含圆角边框和悬停效果：

.pagination li a {
  color: #333;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  margin: 0 4px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

当前页和悬停状态的高亮样式：

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

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

响应式页码设计

在小屏幕设备上调整间距和字号：

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

高级样式变体

带阴影的卡片式页码：

.pagination.shadow li a {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: none;
}

圆形页码样式：

.pagination.circle li a {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

动态效果实现

点击时的按压效果：

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

渐变背景的高级样式：

.pagination.gradient li a.active {
  background: linear-gradient(to right, #4CAF50, #2E8B57);
}