在Web设计中，分页通常用于展示长列表的数据，以提供更好的用户体验。以下是一个简单的CSS分页示例，其中使用了一些基本的HTML和CSS样式：

HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Pagination Example</title>
</head>
<body>

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

</body>
</html>

CSS样式（styles.css）：
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

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

.page {
  padding: 10px;
  margin: 0 5px;
  text-decoration: none;
  color: #3498db;
  border: 1px solid #3498db;
  border-radius: 3px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.page:hover {
  background-color: #3498db;
  color: #fff;
  border-color: #fff;
}

.page.active {
  background-color: #3498db;
  color: #fff;
  border-color: #fff;
  cursor: default;
}

在这个示例中，.pagination 类是包含分页链接的容器，每个分页链接都有 .page 类。激活的分页链接使用 .active 类来突出显示。

你可以根据需要修改样式，以适应你网站的设计。此外，分页通常需要与后端交互，以正确地显示每个页面的内容。在真实的应用中，可能需要使用JavaScript或其他前端框架来处理分页逻辑。


转载请注明出处：http://www.zyzy.cn/article/detail/4071/CSS