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