PbootCMS分页条效果之数字条效果-铁虎资源网

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

1年前发布

0325

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

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

`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`	`{page:numbar}`

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

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

10 </div>

11 </div>

12 {else}

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

`14`	`{/pboot:if}`

CSS样式代码

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

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

查看源码

打印代码帮助

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

`13`	`margin: 0 5px;`

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

15 }

`16`	`.pagination span {`

`17`	`color:` `#333;`

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

`19`	`padding: 8px 2px;`

`20`	`margin: 0 5px;`

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

22 }

`23`	`.pagination a:hover {`

`24`	`color:` `#4fc08d;`

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

26 }

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

`28`	`color:` `#fff;`

`29`	`background:` `#4fc08d;`

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

31 }

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

显示效果如下图所示

© 版权声明

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

THE END

综合资源
# 数据 # 源码 # 网站

喜欢就支持一下吧

相关推荐

评论抢沙发

欢迎您留下宝贵的见解！

提交

暂无评论内容

随即推荐

优茗导航系统源码模版无后台版-铁虎资源网

优茗导航系统源码模版无后台版

含首页，内页，收录提交页，到手就可以用，随意接入后台使用，仅供学习无后台版，需要自己傻瓜式接入一下。

NAEWTRER1028142NEWETREWT5天前

02910

WebView2运行库138.0.3351.77精简优化版-铁虎资源网

WebView2运行库138.0.3351.77精简优化版

Microsoft Edge WebView2 Runtime(WebView2运行库)是微软操作系统WebView2控件的运行环境.它基于Chromium内核构建,主要为应用程序提供浏览器核心功能(如嵌入网页,渲染引擎等),开发者可以直接在...

BryanSlomy18天前

02410

机房托管业务包括哪些

机房托管服务通过将服务器硬件部署于专业数据中心，由服务商提供电力、网络、安防等全方位支持，成为企业降本增效的核心选择。全球领先的数据中心服务商RAKsmart，凭借其专业、安全、稳定的托管...

admin26天前

03512

纯html做的年会抽奖网页-铁虎资源网

纯html做的年会抽奖网页

纯html做的年会抽奖网页

test94051884天前

04015

PHP万能证书查询系统源码全开源可自定义查询条件字段-铁虎资源网

PHP万能证书查询系统源码全开源可自定义查询条件字段

部署教程上传服务器和数据库之后我们到：/application/database.php填写数据库配置，然后访问即可，记得网站目录要为public，后台账号密码我是给大家修改了，市面上有点问题，账号是：admin11 ...

Dizaynersk_oupa16天前

0455

兰空图床上传单页HTML两套-铁虎资源网

兰空图床上传单页HTML两套

找个兰空图床获取 token 填入即可单页修改信息处以标记

casino_lbel5天前

0446

多线服务器具有什么优势？5大隐藏优势告别单线卡顿

多线服务器具有什么优势？多线服务器通过整合不同运营商（如电信、联通、移动）及国际优质线路（如CN2GIA），实现流量智能调度与故障自动切换，有效解决跨网延迟、单点故障等问题。其核心价值在...

admin23天前

0476

自适应双端自动采集电脑壁纸系统源码v2.0-铁虎资源网

自适应双端自动采集电脑壁纸系统源码v2.0

自动采集在线电脑壁纸系统源码v2.0 自适应双端，首页壁纸、金山词霸每日英语、必应每日壁纸栏目适应移动端支持 https 增加搜索入口，直接搜索自己想要的美图壁纸种类多、自动更新，自动采集、瀑...

鹿鸣荐3天前

04810

祥云系统开源云商城程序全开源版个人程序云商城-铁虎资源网

祥云系统开源云商城程序全开源版个人程序云商城

云商城程序全开源版个人程序云商城自己当老板无限分站可全网对接云商城升级版新增供货商系统源多系统批量对接一键上架新增库存告急网盘投诉引流举报商品投诉功能自带供货商系统多支...

ErnestoROM16天前

04811

最新聚合短视频解析去水印系统源码带后台自适应双端-铁虎资源网

最新聚合短视频解析去水印系统源码带后台自适应双端

最新聚合短视频解析去水印系统源码带后台自适应双端轻量化全开源亲测可用

qwng20天前

0318