当前位置：首页 > CSS

css制作页码

2026-04-01 10:11:38CSS

CSS制作页码的方法

通过CSS可以创建美观且功能齐全的页码导航，以下是几种常见实现方式：

基础页码样式

使用无序列表（<ul>）和CSS Flexbox布局创建基础页码：

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" 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;
}

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

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

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

圆形页码设计

通过border-radius属性创建圆形页码按钮：

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

带过渡效果的页码

添加CSS过渡效果增强用户体验：

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

响应式页码设计

使用媒体查询确保在不同屏幕尺寸下的显示效果：

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

高级页码样式

结合伪元素创建更复杂的视觉效果：

css制作页码

.pagination li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #4CAF50;
  transition: all 0.3s;
}

.pagination li a:hover::after {
  width: 100%;
  left: 0;
}

这些方法可以根据具体需求组合使用，创建出既美观又实用的页码导航系统。