您现在的位置是:首页 > 教程 > pbootcms教程pbootcms教程
pbootcms模板列表分页样式代码分享
寻文2024-11-05 21:46:55pbootcms教程已有人查阅
导读今天代码号分享下PBOOTCMS分页样式表和代码,欢迎大家学习参考。pbootcms分页样式1:
今天代码号分享下PBOOTCMS分页样式表和代码,欢迎大家学习参考。
pbootcms分页样式1:
pbootcms分页样式1:
<div class="pages">
<div class="pagination">
{pboot:if({page:rows}>0)}
<a class="page-item" href="{page:index}">首页</a>
<a class="page-item"href='{page:pre}'>上一页</a>
{page:numbar}
<a class="page-item" href='{page:next}'>下一页</a>
<a class="page-item" href='{page:last}'>末页</a>
{/pboot:if}
</div>
</div>
/*代码号 网分页样式*/
.pages{clear:both;padding:20px 0;font-size:14px;text-align:center; overflow:hidden}
.pages .pagination {display:inline-block;**rgin:0 auto;padding:0}
.pages .pagination .page-item,.pages .pagination .page-num{color:#555; padding: 3px 14px; display:block; border-radius: 2px; border: 1px solid #ddd;float: left;**rgin: 0 5px;}
.pages .pagination .page-num-current{ background:#12b34a; color:#fff; border:#12b34a 1px solid}
@media only screen and (**x-width:768px){
.pages .pagination .page-num {display: none;}
}
pbootcms分页样式2:
{pboot:if({page:rows}>0)}
<div class="pages">
<a href="{page:pre}"> << </a>
{page:numbar}
<a href="{page:next}"> >> </a>
<a class="pagecount">{page:current}/{page:count}</a>
</div>
{else}
<div class="text-center my-5 text-secondary">未查询到任何数据!</div>
{/pboot:if}
/*代码号 网分页样式*/
.pages{padding: 20px 0;width:百%;text-align: center;clear: both;}
.pages a,.pages span{color: #666;padding: 0 15px;**rgin: 0 3px;display: inline-block;vertical-align: middle;line-height: 34px;background: #f9f9f9;border: 1px solid #f2f2f2;}
.pages a:hover{display:inline-block;color: #fff;background: #dc0b01;border-color: #dc0b01;box-shadow: 0 0 14px rgba(0, 0, 0, .2);}
.pages span{display:inline-block;color: #666;}
.pages a.page-num-current{display:inline-block;color: #fff;background: #dc0b01;border-color: #dc0b01;box-shadow: 0 0 14px rgba(0, 0, 0, .2);}
.text-secondary{text-align: center; padding:10px 0}
本文标签:
很赞哦! ()
相关文章
- Pbootcms模板安装教程
- pbootcms模板时间标签格式大全,写法示例
- Pbootcms模板安装步骤教程
- pbootcms模板怎么自动生成当前页面的二维码
- pbootcms模板修改编辑工具用哪个好
- pbootcms模板建网站需要多少钱?
- pbootcms模板本地环境怎么安装测试
- pbootcms模板升级程序后报错:Parse error: syntax error, unexpec
- pbootcms模板制作工具及基本知识介绍
- pbootcms模板怎么换,pbootcms模板更换的方法
- pbootcms模板修改tags实现keywords内容关联匹配的代码实例
- pbootcms模板添加栏目提示该内容栏目编号已经存在,不能再使用
随机图文
-
pbootcms万能SQL标签使用方法
V3.2.4 build 2023-03-04开始已不再支持该标签(安全性修复)用于自定义任意查问语句并循环输出 -
pbootcms模板怎么实现按照自定义字段搜索
pbootcms模板按照自定义字段搜索,1、在默认的搜索功能下加上这句代码:2、在搜索模板search.HTML上 加上代码: -
pbootcms列表一条内容前端页面却显示2条的修复方法
今天又有群友遇到一个奇怪的BUG,百思不得其解,这种疑难杂症我专业啊! pbootcms后台列表里明明就只有一篇文章,但是前端却显示了两条。 如下图,后台只添加了一条文章: -
pbootcms网站常见报错,错误有哪些及解决方法
为了方便PB站长们快速解决常见的错误提示,这边做一篇整合的问题解答文章,下面将罗列出pbootcms在后台或者前台出现的问题和解决方法。
留言与评论 (共有 条评论) |