一、什么是分页代码
在网页制作中，分页是非常常用的功能，对于大量数据需要分页展示的场景，使用分页代码可以方便地将页面数据展示出来。HTML和CSS提供了多种方式实现分页效果，因此在网站开发中，我们需要了解和掌握这些分页实现方法。
二、常用的分页实现方法
1、基于CSS的分页代码：
<div class="page-wrap">
<ul class="page-list">
<li><a href="#"><span>1</span></a></li>
<li><a href="#"><span>2</span></a></li>
<li><a href="#"><span>3</span></a></li>
<li><a href="#"><span>4</span></a></li>
<li><a href="#"><span>5</span></a></li>
</ul>
</div>
.page-list{
display:inline-block;
background-color:#fff;
border:1px solid #ccc;
padding :5px 10px;
}
.page-list li{
display:inline-block;
margin-right:5px;
color:#333;
font-size:14px;
}
.page-list li a{
color:#333;
}
.page-list li a:hover{
color:#f60;
text-decoration:none;
}
.page-list li a.active{
color:#f60;
font-weight:bold;
}
2、基于Bootstrap的分页代码：
<nav>
<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>
</nav>
3、基于jQuery的分页插件代码：
$(function(){
$('#pager').pagination({
total: 1000,
pageSize: 10,
showPageList: true,
showRefresh: true,
onSelectPage: function(pageNumber, pageSize){
console.log('pageNumber=' + pageNumber + ',pageSize=' + pageSize);
}
});
});
三、分页代码实现效果
1、CSS实现的分页效果：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198271.html
微信扫一扫 
支付宝扫一扫 