我要投稿

PbootCMS分页条效果之数字条效果

天择 PbootCMS

2022-07-29 0 455

数字条自带a链接标签代码和选中效果标签

数字带class名称为 page-num，当前页自带 page-num-current 样式

01
<!-- 分页 -->

02
{pboot:if({page:rows}>0)}

03
  <div class="pagebar">

04
    <div class="pagination">

05
      <a class="page-item page-link hidden-sm" href="{page:index}" title="首页">首页</a>

06
      <a class="page-item page-link" href="{page:pre}" title="上一页">上一页</a>

07
      {page:numbar}

08
      <a class="page-item page-link" href="{page:next}" title="下一页">下一页</a>

09
      <a class="page-item page-link hidden-sm" href="{page:last}" title="尾页">尾页</a>

10
    </div>

11
  </div> 

12
{else}

13
  <div class="tac text-secondary">本分类下无任何数据！</div>

14
{/pboot:if}

需要给数字条里的span标签单独设置样式，使分页条更美观好看

数字条样式分页条适合企业网站，行业网站使用

CSS样式代码

01
/* ----- PB分页数字条效果 结束 ----- */

02
.pagebar .pagination {

03
  display: flex;

04
  justify-content: center;

05
  margin-top: 10px;

06
}

07
.pagination a {

08
  background: #fff;

09
  border: 1px solid #ccc;

10
  color: #333;

11
  font-size: 14px;

12
  padding: 8px 12px;

13
  margin: 0 5px;

14
  border-radius: 3px;

15
}

16
.pagination span {

17
    color: #333;

18
    font-size: 14px;

19
    padding: 8px 2px;

20
    margin: 0 5px;

21
    border-radius: 3px;

22
}

23
.pagination a:hover {

24
  color: #4fc08d;

25
  border: 1px solid #4fc08d;

26
}

27
.pagination a.page-num-current {

28
  color: #fff;

29
  background: #4fc08d;

30
  border: 1px solid #4fc08d;

31
}

32
/* ----- PB分页数字条效果 结束 ----- */

显示效果如下图所示

PbootCMS分页条效果之数字条效果

收藏 (0) 打赏

感谢您的支持，我们会继续努力的!

打开支付宝/微信/QQ扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传，如有侵权请带证联系本站客服进行处理！邮箱：team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系本站客服处理，有奖励！
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 本站原创资源如需商用还请申请商业授权，否则本站有权追究其法律责任！
5. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有学币奖励额外收入！

凌晨资源网 PbootCMS PbootCMS分页条效果之数字条效果 https://www.lingchenw.cn/ztjc/6231.html