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

模板商城2025-09-03 14:45　8 浏览

点赞收藏

第一步：PbootCMS 单页/总页数分页条效果

显示上一页，下一页，首页，尾页，和当前页，以及当前页位于总页数的位置

这种分页效果简洁明了，适合博客站和咨询站等网站使用

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      <a class="page-item page-num-current" href="javascript:;" title="当前页">{page:current}</a>
08      <a class="page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count}</a>
09      <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样式代码

美化后的分页条效果

查看源码
打印代码帮助
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: 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}

本站所有资源都是由网友投搞发布，或转载各大下载站，请自行检测软件的完整性！本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架，联系方式：7855231#qq.com

CMS模板配置面包屑导航 PbootCMS

CMS模板邮件配置修改发件人信息 PbootCMS

评论0评论

文章资讯

随机推荐