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