CSS3 分页学习笔记

CSS3带来了许多令人兴奋的新特性和功能，其中的分页效果和样式是吸引眼球的重要因素之一。在本文中，我们将深入探讨如何使用CSS3实现各种分页效果。

实例演示

1. 点状分页

点状分页是比较简单的一种分页效果，代码如下：

cssCopy Code
.pagination {
  display: flex;
}

.pagination li {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.pagination li.active {
  background-color: #333;
}

2. 条形分页

条形分页是比较常见的分页效果之一，代码如下：

cssCopy Code
.pagination {
  display: flex;
}

.pagination li {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.pagination li.active {
  background-color: #333;
  color: #fff;
}

3. 下拉框分页

下拉框分页是比较方便用户操作的一种分页效果，代码如下：

cssCopy Code
.pagination select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.pagination option {
  padding: 5px;
}

4. 水平滚动分页

水平滚动分页是一种非常炫酷的分页效果，代码如下：

cssCopy Code
.pagination {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.pagination li {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.pagination li.active {
  background-color: #333;
  color: #fff;
}

总结

CSS3提供了丰富的分页效果和样式，本文只是介绍了其中的几种，希望读者们可以根据自己的需求和想象力创造更多的分页效果。