欢迎来到誉云网络
帮助中心

誉云网络

热门搜索: pbootcms    织梦转系统    运维市场    虚拟主机   

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

  • 时间:2022-04-05 16:54 编辑:誉云网络 来源: 阅读:124
  • 扫一扫,手机访问
摘要: 第一步: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样式代码

美化后的分页条效果


/* ----- 通用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;

}


  • 全部评论(0)
最新发布的资讯信息
【源码/模板|Discuz!教程】UCenter info: MySQL Query Error(dz论坛登陆管理员出错代码)(2022-04-12 22:51)
【源码/模板|pbootcms教程】pbootcms后台设置二级菜单默认展开(后台栏目所有展开)(2022-04-05 22:50)
【源码/模板|pbootcms教程】pbootcms挪用内容中换行符“”不换行怎么办(2022-04-05 22:50)
【源码/模板|pbootcms教程】pbootcms模板如何判断封面图片是否为空(2022-04-05 22:49)
【源码/模板|pbootcms教程】pbootcms在阿里云主机上邮件发送失败:服务器已经禁用stream_socket_client和fsockopen函(2022-04-05 22:48)
【源码/模板|pbootcms教程】pbootcms后台菜单若何开启(2022-04-05 22:47)
【源码/模板|pbootcms教程】给pbootcms增加换行标签br=1(2022-04-05 22:47)
【源码/模板|pbootcms教程】pbootcms英文站搜索效果页面包屑显示中文的修改方法(2022-04-05 22:46)
【源码/模板|pbootcms教程】pbootcms如何显示按文章内容搜索,而不是搜索标题(2022-04-05 22:46)
【源码/模板|pbootcms教程】pbootcms网站留言发送到邮箱教程(2022-04-05 22:45)
联系我们
Q Q:827202335
客服:18312384410
邮箱:827202335@qq.com
营业:09:00 - 19:00
联系客服
购买源码 源码咨询 联系客服
18312384410
手机版

扫一扫进手机版
返回顶部