PbootCMS制作个性分页条之单页/总页数效果-五伯资源网

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

3个月前发布

02312

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

第一步：PbootCMS 单页/总页数分页条效果

显示上一页，下一页，首页，尾页，和当前页，以及当前页位于总页数的位置

这种分页效果简洁明了，适合博客站和咨询站等网站使用

`01`	`<!-- 分页 -->`

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

`03`	`<div class="pagebar">`

`04`	`<div class="pagination">`

`05`	`<a class="page-item page-link hidden-sm"` `href="{page:index}"` `title="首页">首页</a>`

`06`	`<a class="page-item page-link"` `href="{page:pre}"` `title="上一页">上一页</a>`

`07`	`<a class="page-item page-num-current"` `href="JAVAscript:;"` `title="当前页">{page:current}</a>`

`08`	`<a class="page-item page-link"` `href="JAVAscript:;"` `title="当前页/总页数">{page:current}/{page:count}</a>`

`09`	`<a class="page-item page-link"` `href="{page:next}"` `title="下一页">下一页</a>`

`10`	`<a class="page-item page-link hidden-sm"` `href="{page:last}"` `title="尾页">尾页</a>`

11 </div>

12 </div>

13 {else}

`14`	`<div class="tac text-secondary">本分类下无任何数据！</div>`

`15`	`{/pboot:if}`

第二步：CSS样式代码

美化后的分页条效果

`01`	`/* ----- 通用PB分页条 ----- */`

`02`	`.pagebar .pagination {`

`03`	`display: flex;`

`04`	`justify-content: center;`

`05`	`margin-top: 10px;`

06 }

`07`	`.pagination a {`

`08`	`background:` `#fff;`

`09`	`border: 1px solid` `#ccc;`

`10`	`color:` `#333;`

`11`	`font-size: 14px;`

`12`	`padding: 6px 8px;`

`13`	`margin: 0 2px;`

`14`	`border-radius: 3px;`

15 }

`16`	`.pagination a:hover {`

`17`	`color:` `#4fc08d;`

`18`	`border: 1px solid` `#4fc08d;`

19 }

`20`	`.pagination a.page-num-current {`

`21`	`color:` `#fff;`

`22`	`background:` `#4fc08d;`

`23`	`border: 1px solid` `#4fc08d;`

24 }

© 版权声明

文章版权归作者所有，未经允许请勿转载。

THE END

综合资源
# 数据 # 网站 # 博客 # JAVA

喜欢就支持一下吧

相关推荐

评论抢沙发

欢迎您留下宝贵的见解！

提交

暂无评论内容

随即推荐

安装系统步骤

不管我们是什么电脑都需要装系统的，系统种类也是各式各样、五花八门，有些朋友还是不喜欢现在的系统，就会给电脑重新装系统，那么安装系统步骤你了解吗，今天我来跟你们说说安装系统win10教程...

test3257603312个月前

02313

巧摄 V10.4.6 中国永久激活版-五伯资源网

巧摄 V10.4.6 中国永久激活版

【资源名称】：巧摄

手机版软件

admin2年前

0397

正版windows系统安装工具介绍-五伯资源网

正版windows系统安装工具介绍

windows系统有着非常强大的功能，稳定性和兼容性也很高，但是再好的系统时间久了难免会有各种故障，因此不少网友想重装正版windows系统。不过很多网友是电脑小白，不知道怎么安装正版windows系...

test409274911个月前

04013

创意大学生求职简历PPT模板-五伯资源网

创意大学生求职简历PPT模板

一份有创意的大学生求职个人简历模板，时尚全图背景配合大号字体，共32页，内容非常详尽，好看的动态效果。使用字体：汉仪菱心体简。分类：个人简历下载：29905次比例：宽屏16:9 页数：31页 ...

test2097815310个月前

04313

2024定制版抢单支付系统源码|开代理|自动抢单接单-五伯资源网

2024定制版抢单支付系统源码|开代理|自动抢单接单

2024定制版抢单支付系统源码|开代理|自动抢单接单https://xiaok.lanzoum.com/iyyje1wg68mb

admin25天前

0439

电脑系统还原不了怎么办-五伯资源网

电脑系统还原不了怎么办

系统还原是win7系统中的一项功能,当电脑出现问题的话,可以帮助我们还原到之前的状态进行解决，但有时我们也会遇到电脑系统还原不了的情况，那么电脑系统还原不了怎么办呢?下面，小编就将电脑系...

test3316110712个月前

02214

产品青年进阶经理成长营-五伯资源网

产品青年进阶经理成长营

课程介绍不论何种互联网产品，都难以逃离“商业化”的发展路径，这就意味着产品经理必须要懂得如何搭建电商系统。但实际上，大多数产品经理受限于自身和业务的局限，都没有亲自操盘过一...

admin2年前

03312

影视解说+中视频玩法详细教程-五伯资源网

影视解说+中视频玩法详细教程

这门课程将详细教授影视解说和中视频玩法的技巧和知识。学习者将了解影视解说的基本原理和技巧，以及中视频的制作流程和编辑技巧。该课程旨在帮助学员提升影视解说和中视频制作的能力，为他们进...

test2515927610个月前

08480

弘扬爱国精神班会PPT模板-五伯资源网

弘扬爱国精神班会PPT模板

弘扬爱国精神班会模板。探索新时代爱国主义的教育路径，增强爱国的动能与实效。内容包括远爱国的内涵、缘何爱国、我们应该如何爱国。分类：教育教学下载：3390次比例：宽屏16:9 页数：23页格...

qwng10个月前

04110

win10安装失败的怎么办-五伯资源网

win10安装失败的怎么办

win10安装失败怎么办?有网友反映在给自己的电脑安装win10系统的过程中显示安装失败，不知道这种情况该怎么解决。咨询小编win10安装失败怎么办如何解决。下面小编就给大家带来了win10安装失败解...

admin11个月前

02412