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

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

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

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

01 02 {pboot:if({page:rows}>0)} 03 04 05 首页 06 上一页 07 {page:current} 08 {page:current}/{page:count} 09 下一页 10 尾页 11   12   13 {else} 14 本分类下无任何数据！ 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 }