PbootCMS分页查询条实际效果之数据条实际效果

muban大师

数据条内置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分页查询数据条实际效果 完毕 ----- */


屏幕清晰度如图所示

                               
登录/注册后可看大图