分页 - CSS

分页是Web应用程序中常见的一个功能，可以将大量数据分成多个页面以便浏览。在Web设计中，使用CSS可以轻松地创建漂亮的分页样式。在本文中，我会向您介绍如何使用CSS来创建分页效果。

基础分页结构

要创建基本的分页结构，请使用<ul>和<li>标记。将每个页码放在一个<li>标记中，将它们都包含在一个<ul>标记中。

<ul class="pagination">
  <li class="prev-page"><a href="#">&laquo; Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><span>...</span></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li class="next-page"><a href="#">Next &raquo;</a></li>
</ul>

在上面的代码中，我们使用<ul>标记创建一个名为pagination的分页列表，然后将每个页码（以及"上一页"和"下一页"按钮）放置在一个<li>标记中。请注意，"..."部分是<span>标记而不是<li>标记，因为它们不可点击。

分页样式

一旦我们有了基本的分页结构，我们就可以使用CSS样式来美化它。以下是一个基本的CSS样式：

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

.pagination li {
  display: inline-block;
  margin: 0 5px;
}

.pagination li a,
.pagination li span {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
}

.pagination li span {
  cursor: default;
  color: #aaa;
}

.pagination li a:hover {
  background-color: #f2f2f2;
}

.pagination .prev-page a,
.pagination .next-page a {
  background-color: #4CAF50;
  border: none;
  color: white;
}

.pagination .prev-page a:hover,
.pagination .next-page a:hover {
  background-color: #3e8e41;
}

在上面的CSS代码中，我们设置了分页列表的基本样式。我们将其设置为Flexbox布局，使其在水平方向上居中对其。我们还设置了分页列表项上的<li>样式，以便它们可以合理地排列和对齐。

我们还设置了每个分页链接（包括"上一页"和"下一页"按钮）的样式。我们设置了它们的颜色、背景、边框等。这些样式可以根据您的需要进行更改。

最后，我们还为"上一页"和"下一页"按钮设置了较为特殊的样式。它们具有不同的背景颜色和边框。当鼠标悬停在它们上面时，它们的颜色会有所变化。

完整代码

以下是完整的HTML和CSS代码，可以直接使用：

<ul class="pagination">
  <li class="prev-page"><a href="#">&laquo; Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><span>...</span></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li class="next-page"><a href="#">Next &raquo;</a></li>
</ul>

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

.pagination li {
  display: inline-block;
  margin: 0 5px;
}

.pagination li a,
.pagination li span {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
}

.pagination li span {
  cursor: default;
  color: #aaa;
}

.pagination li a:hover {
  background-color: #f2f2f2;
}

.pagination .prev-page a,
.pagination .next-page a {
  background-color: #4CAF50;
  border: none;
  color: white;
}

.pagination .prev-page a:hover,
.pagination .next-page a:hover {
  background-color: #3e8e41;
}

以上就是使用CSS创建分页样式的介绍和说明。这个简单的示例可以帮助您构建和样式化自己的分页控件。