学习资料_文档下载_软件应用_程序模板

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

搜索
查看: 3153|回复: 0

PbootCMS制作个性分页条之单页/总页数效果

[复制链接]

295

主题

297

帖子

787

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
787
发表于 2024-12-31 09:18:08 | 显示全部楼层 |阅读模式
第一步:PbootCMS 单页/总页数 分页条效果
1-211025092232607.png
显示上一页,下一页,首页,尾页,和当前页,以及当前页位于总页数的位置
这种分页效果简洁明了,适合博客站和咨询站等网站使用
  1. <!-- 分页 -->
  2. {pboot:if({page:rows}>0)}
  3.   <div class="pagebar">
  4.     <div class="pagination">
  5.       <a class="page-item page-link hidden-sm" href="{page:index}" title="首页">首页</a>
  6.       <a class="page-item page-link" href="{page:pre}" title="上一页">上一页</a>
  7.       <a class="page-item page-num-current" href="javascript:;" title="当前页">{page:current}</a>
  8.       <a class="page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count}</a>
  9.       <a class="page-item page-link" href="{page:next}" title="下一页">下一页</a>
  10.       <a class="page-item page-link hidden-sm" href="{page:last}" title="尾页">尾页</a>
  11.     </div>
  12.   </div>
  13. {else}
  14.   <div class="tac text-secondary">本分类下无任何数据!</div>
  15. {/pboot:if}
复制代码
第二步:CSS样式代码
美化后的分页条效果
  1. /* ----- 通用PB分页条 ----- */
  2. .pagebar .pagination {
  3.   display: flex;
  4.   justify-content: center;
  5.   margin-top: 10px;
  6. }
  7. .pagination a {
  8.   background: #fff;
  9.   border: 1px solid #ccc;
  10.   color: #333;
  11.   font-size: 14px;
  12.   padding: 6px 8px;
  13.   margin: 0 2px;
  14.   border-radius: 3px;
  15. }
  16. .pagination a:hover {
  17.   color: #4fc08d;
  18.   border: 1px solid #4fc08d;
  19. }
  20. .pagination a.page-num-current {
  21.   color: #fff;
  22.   background: #4fc08d;
  23.   border: 1px solid #4fc08d;
  24. }
复制代码





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

HI223.COM 举报邮箱:345306361@qq.com

GMT+8, 2025-7-3 18:52 , Processed in 0.064367 second(s), 21 queries .

Powered by HI223分享社区 2.3

© 2019-2020 Hi223 All Right Reserved

渝公网安备 50022502000358号

渝ICP备14008270号-3