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

誉云网络

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

pbootcms分页条效果之数字条效果

  • 时间:2022-04-05 17:44 编辑:誉云网络 来源: 阅读:141
  • 扫一扫,手机访问
摘要: 数字条自带a链接标签代码和选中效果标签 数字带class名称为 page-num,当前页自带 page-num-current 样式 <!-- 分页 -->{pboot:if({page:rows}>0)}  <div class="pagebar&qu

数字条自带a链接标签代码和选中效果标签

数字带class名称为 page-num,当前页自带 page-num-current 样式

<!-- 分页 -->

{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>

      {page:numbar}

      <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样式代码

需要给数字条里的span标签单独设置样式,使分页条更美观好看

数字条样式分页条适合企业网站,行业网站使用
 

/* ----- 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: 8px 12px;

  margin: 0 5px;

  border-radius: 3px;

}

.pagination span {

    color: #333;

    font-size: 14px;

    padding: 8px 2px;

    margin: 0 5px;

    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;

}

/* ----- PB分页数字条效果 结束 ----- */


显示效果如下图所示

PbootCMS分页条效果之数字条效果


  • 全部评论(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
手机版

扫一扫进手机版
返回顶部