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

CMS教程 2025-03-04 0

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

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

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

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

02	{pboot:if({page:rows}>0)}

07	{page:current}

08	{page:current}/{page:count}

{else}

14	本分类下无任何数据！

15	{/pboot:if}

第二步：CSS样式代码

美化后的分页条效果

01	/* —– 通用PB分页条 —– */

02	.pagebar .pagination {

03	display: flex;

04	justify-content: center;

05	margin-top: 10px;

}

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;

}

16	.pagination a:hover {

17	color:#4fc08d;

18	border: 1px solid#4fc08d;

}

20	.pagination a.page-num-current {

21	color:#fff;

22	background:#4fc08d;

23	border: 1px solid#4fc08d;

}

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。