PbootCMS数字条效果制作
数字条自带a链接标签代码和选中效果标签
数字带class名称为page-num,当前页自带page-num-current样式
<!--分页--> {pboot:if({page:rows}>0)} <divclass="pagebar"> <divclass="pagination"> <aclass="page-itempage-linkhidden-sm" href="{page:index}" rel="external nofollow" title="首页">首页</a> <aclass="page-itempage-link" href="{page:pre}" rel="external nofollow" title="上一页">上一页</a> {page:numbar} <aclass="page-itempage-link" href="{page:next}" rel="external nofollow" title="下一页">下一页</a> <aclass="page-itempage-linkhidden-sm" href="{page:last}" rel="external nofollow" title="尾页">尾页</a> </div> </div> {else} <divclass="tactext-secondary">本分类下无任何数据!</div> {/pboot:if}
CSS样式代码
需要给数字条里的span标签单独设置样式,使分页条更美观好看
数字条样式分页条适合企业网站,行业网站使用
/*-----PB分页数字条效果结束-----*/ .pagebar.pagination{ display:flex; justify-content:center; margin-top:10px; } .paginationa{ background:#fff; border:1pxsolid#ccc; color:#333; font-size:14px; padding:8px12px; margin:05px; border-radius:3px; } .paginationspan{ color:#333; font-size:14px; padding:8px2px; margin:05px; border-radius:3px; } .paginationa:hover{ color:#4fc08d; border:1pxsolid#4fc08d; } .paginationa.page-num-current{ color:#fff; background:#4fc08d; border:1pxsolid#4fc08d; } /*-----PB分页数字条效果结束-----*/