您现在的位置是:首页 > 教程 > pbootcms教程pbootcms教程

pbootcms制作个性分页单页/总页数效果代码示例

尤介辉2024-09-11 18:54:33pbootcms教程已有人查阅

导读第一步:pbootcms 单页/总页数 分页条效果 显示上一页,下一页,首页,尾页,和当前页,以及当前页位于总页数的位置   这种分页效果简洁明了,适合博客站和咨询站等网站使用

第一步:pbootcms 单页/总页数 分页条效果 显示上一页,下一页,首页,尾页,和当前页,以及当前页位于总页数的位置   这种分页效果简洁明了,适合博客站和咨询站等网站使用
{pboot:if({page:rows}>0)}首页  上一页  {page:current}  {page:current}/{page:count}  下一页  尾页{else}本分类下无任何数据!{/pboot:if}
第二步:CSS样式代码 美化后的分页条效果
/* ----- 通用PB分页条 ----- */
.pagebar .pagination {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pagination a {
background: #fff;
border: 1px solid #ccc;
color: #333;
font-size: 14px;
padding: 6px 8px;
margin: 0 2px;
border-radius: 3px;
}
.pagination a:hover {
color: #4fc08d;
border: 1px solid #4fc08d;
}
.pagination a.page-num-current {
color: #fff;
background: #4fc08d;
border: 1px solid #4fc08d;
}

本文标签:

很赞哦! ()

留言与评论 (共有 条评论)
验证码:

相关标签