PbootCMS分页栏效果的数字栏效果

2022-07-19 0 755

PbootCMS数字条效果制作

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

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

  <!--分页-->

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

    <divclass="pagebar">

      <divclass="pagination">

        <aclass="page-itempage-linkhidden-sm" href="{page:index}" rel="external nofollow"  title="首页">首页</a>

        <aclass="page-itempage-link" href="{page:pre}" rel="external nofollow"  title="上一页">上一页</a>

        {page:numbar}

        <aclass="page-itempage-link" href="{page:next}" rel="external nofollow"  title="下一页">下一页</a>

        <aclass="page-itempage-linkhidden-sm" href="{page:last}" rel="external nofollow"  title="尾页">尾页</a>

      </div>

    </div>

  {else}

    <divclass="tactext-secondary">本分类下无任何数据!</div>

  {/pboot:if}

CSS样式代码

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

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

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

  .pagebar.pagination{

  display:flex;

  justify-content:center;

  margin-top:10px;

  }

  .paginationa{

  background:#fff;

  border:1pxsolid#ccc;

  color:#333;

  font-size:14px;

  padding:8px12px;

  margin:05px;

  border-radius:3px;

  }

  .paginationspan{

  color:#333;

  font-size:14px;

  padding:8px2px;

  margin:05px;

  border-radius:3px;

  }

  .paginationa:hover{

  color:#4fc08d;

  border:1pxsolid#4fc08d;

  }

  .paginationa.page-num-current{

  color:#fff;

  background:#4fc08d;

  border:1pxsolid#4fc08d;

  }

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

显示效果如下图所示

PbootCMS分页栏效果的数字栏效果

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (1)

建站虎 pbootcms教程 PbootCMS分页栏效果的数字栏效果 https://www.jianzhanhu.com/1962.html

常见问题
  • 1.把网站的程序主机,然后解压压缩包,输入域名打开,会出现授权的页面,直接到pbootcms的官网进行授权(免费商业授权)。 2.登录后台,登录方式:你的域名/admin.php 账号:admin 密码:admin或123456 3.后台-全局配置-配置参数里最下面,填写刚刚申请的授权码 4.站点信息里改成自己当前使用的域名 点击立即提交完成操作。
查看详情

相关文章

发表评论
暂无评论