CSS和HTML页面分页代码

一、什么是分页代码

在网页制作中，分页是非常常用的功能，对于大量数据需要分页展示的场景，使用分页代码可以方便地将页面数据展示出来。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实现的分页效果：

• 1
• 2
• 3
• 4
• 5