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

分类:网站系统教程 时间:2021-12-12 10:19 浏览:207
概述
第一步:PbootCMS 单页/总页数 分页条效果显示上一页,下一页,首页,尾页,和当前页,以及当前页位于总页数的位置 这种分页效果简洁明了,适合博客站和咨询站等网站使用01<!-- 分页 -->02{pboot:if({page:rows}>0)}03  <div class="pagebar">04    <
内容



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

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

 

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

01<!-- 分页 -->

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

03  <div class="pagebar">

04    <div class="pagination">

05      <a class="page-item page-link hidden-sm" href="{page:index}" title="首页">首页</a>

06      <a class="page-item page-link" href="{page:pre}" title="上一页">上一页</a>

07      <a class="page-item page-num-current" href="javascript:;" title="当前页">{page:current}</a>

08      <a class="page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count}</a>

09      <a class="page-item page-link" href="{page:next}" title="下一页">下一页</a>

10      <a class="page-item page-link hidden-sm" href="{page:last}" title="尾页">尾页</a>

11    </div>

12  </div>

13{else}

14  <div class="tac text-secondary">本分类下无任何数据!</div>

15{/pboot:if}

第二步:CSS样式代码

美化后的分页条效果

01/* ----- 通用PB分页条 ----- */

02.pagebar .pagination {

03  display: flex;

04  justify-content: center;

05  margin-top: 10px;

06}

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;

15}

16.pagination a:hover {

17  color: #4fc08d;

18  border: 1px solid #4fc08d;

19}

20.pagination a.page-num-current {

21  color: #fff;

22  background: #4fc08d;

23  border: 1px solid #4fc08d;

24}


评论
底部广告
网站首页  |   关于我们  |   广告合作  |   联系我们  |   隐私条款  |   免责声明  |   网站地图
CopyRight 2014-2024 源码服务市场 | 赣ICP备13005304号-4
联系客服
手机版

扫一扫进手机版
返回顶部