上下页分页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: flex;
  justify-content: center;
  margin-top: 20px;
}

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

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

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

document.querySelectorAll('.pagination a').forEach(link => {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    const page = this.textContent;
    loadPage(page); // 假设loadPage是加载指定页面内容的函数
  });
});

@media (max-width: 600px) {
  .pagination {
    flex-wrap: wrap;
  }
  .pagination a {
    padding: 8px 12px;
    margin: 2px;
  }
}