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分页数字条效果结束-----*/
显示效果如下图所示
