找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 265|回复: 0

[cms教程] PbootCMS分页查询条实际效果之数据条实际效果

[复制链接]

该用户从未签到

发表于 2021-12-3 10:30:59 | 显示全部楼层 |阅读模式

您需要 登录 才可以下载或查看,没有账号?立即注册

×
数据条内置a链接标识编码和选定实际效果标识

数据带class名称为 page-num,当页内置 page-num-current 款式


{pboot:if({page:rows}>0)}
  
   
      [url=,主页[/url]
      [url=,上一页[/url]
      {page:numbar}
      [url=,下一页[/url]
      [url=,末页[/url]
   
  
{else}
  本种类下没有任何数据信息!
{/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分页查询数据条实际效果 完毕 ----- */


屏幕清晰度如图所示



                               
登录/注册后可看大图
回复

使用道具 举报

网站地图|页面地图|文字地图|Archiver|手机版|小黑屋|找资源 |网站地图

GMT+8, 2024-12-23 03:45

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表