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

PbootCMS分页单页/总页数的制作方法

傲蕾2025-02-20PbootCMS教程已有人查阅

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

第一步:PbootCMS单页/总页数分页条效果显示上一页,下一页,首页,尾页,和当前页,以及当前页位于总页数的位置这种分页效果简洁明了,适合博客站和咨询站等网站使用
<!-- 分页 -->
{pboot:if({page:rows}>0)}
<div class="pagebar">
<div class="pagination">
<a class="page-item page-link hidden-sm" href="{page:index}" title="首页">首页</a>
<a class="page-item page-link" href="{page:pre}" title="上一页">上一页</a>
<a class="page-item page-num-current" href="javascript:;" title="当前页">{page:current}</a>
<a class="page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count}</a>
<a class="page-item page-link" href="{page:next}" title="下一页">下一页</a>
<a class="page-item page-link hidden-sm" href="{page:last}" title="尾页">尾页</a>
</div>
</div>
{else}
<div class="tac text-secondary">本分类下无任何数据!</div>
{/pboot:if}
第二步:CSS样式代码美化后的分页条效果
.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;
}

本文标签:

很赞哦! ()

相关源码

  • (自适应)家政保洁保姆打扫卫生清灰服务pbootcms模板免费下载采用手工编写的DIV+CSS架构,代码结构清晰无冗余,加载速度优异。响应式设计适配各类终端设备,保障手机、平板、电脑端的一致浏览体验。查看源码
  • 工商注册财务代理记账类自适应pbootcms网站工商注册、财务代理记账企业打造的数字化门户模板,基于PbootCMS内核深度开发。采用前沿响应式架构,无缝适配手机端触控交互与PC端展示需求查看源码
  • (自适应)WordPress二次元博客主题SakurairoSakurairo主题为二次元内容创作者设计,提供丰富的动漫风格元素和个性化的展示效果。该主题在原有Sakura主题基础上进行了功能增强,支持多种自定义设置,满足动漫爱好者建立个人博客的需求。查看源码
  • 响应式HTML5家居建材办公家具桌椅pbootcms模板为家居建材、办公家具企业打造的响应式网站模板,同时支持多行业快速适配通过替换文字图片即可转型为其他行业官网,大幅降低开发成本。查看源码
  • (PC+WAP)蓝色不锈钢簧线金属制品营销型pbootcms网站模板本模板基于PbootCMS内核开发,为不锈钢及金属制品企业量身打造。采用响应式设计,适配PC与移动设备,提供统一后台管理体验,数据实时同步更新。查看源码
  • (自适应)橙色家政服务清洁保洁服务pbootcms网站模板源码下载模板核心价值:基于PbootCMS内核开发的家政服务类网站模板,通过模块化设计展现服务项目、团队风采、服务案例等核心板块,突出时效预约、服务标准化展示等家政行业特性。查看源码
分享笔记 (共有 篇笔记)
验证码: