CSS 分页实例

CSS 分页实例

在Web开发中，分页是一个非常重要的功能，它可以让我们在页面上展示大量的数据，同时使页面内容更加清晰明了。CSS可以很好地实现分页效果，并且可以美化分页按钮，让页面看起来更加美观。

本文将介绍基于CSS的分页实例，具体包括分页样式设置、分页按钮激活状态、分页页码等内容。

基本结构

我们首先来看一下分页结构的HTML代码及CSS样式：

<div class="pagination-wrapper">
  <ul class="pagination">
    <li>
      <a href="#">上一页</a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
      <a href="#">下一页</a>
    </li>
  </ul>
</div>

.pagination-wrapper {
  text-align: center;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}

.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  display: block;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #428bca;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
  cursor: default;
}

分页样式设置

我们首先需要给分页设置一定的样式，包括外边距、圆角、字体颜色等。其中.pagination-wrapper和.pagination的样式设置是为了让分页居中显示。

.pagination-wrapper {
  text-align: center;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}

.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  display: block;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #428bca;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

分页按钮激活状态

分页按钮激活状态我们通过.active类来实现，同时，我们需要对这个类设置特定的样式，包括字体颜色、背景颜色等。

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
  cursor: default;
}

分页页码

分页页码我们可以通过后台获取到总页数，然后根据总页数循环生成分页按钮。

<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>

如果当前页为激活状态，我们可以为其添加.active类。

<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>

至此，一个完整的分页样式就完成了。

总结

通过使用CSS，我们可以轻松地实现分页效果，同时可以美化分页按钮，使页面看起来更加美观。在实际开发中，我们可以根据具体需求对分页样式进行调整，以达到最佳用户体验效果。

css3教程 CSS 图片