您现在的位置是：首页 > cms教程 > PbootCMS教程PbootCMS教程

pbootcms分页效果数字效果实现方法

谭满铿2024-09-09PbootCMS教程已有人查阅

导读数字条自带a链接标签代码和选中效果标签数字带class名称为 page-num，当前页自带page-num-current样式{pboot:if({page:rows}>0)}首页

数字条自带a链接标签代码和选中效果标签数字带class名称为 page-num，当前页自带page-num-current样式{pboot:if({page:rows}>0)}首页上一页{page:numbar}下一页尾页 {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分页数字条效果 结束 ----- */

本文标签：

很赞哦！ ()

上一篇：pbootcms列表排序切换，时间/浏览量/点赞量/随机排序

下一篇：pbootcms网站版权自动显示年份的修改方法

图文教程

相关源码

(自适应)英文绿色精密模具零件加工五金零件pbootcms外贸网站模板本模板基于PbootCMS开发，为五金零件、精密模具加工等英文外贸企业设计。采用响应式布局，适配各类移动设备，是五金零件企业开展国际贸易的专业展示平台。查看源码
(自适应响应式)HTML5电脑手机电子数码产品配件pbootcms模板下载本模板为电脑配件、手机配件及数码周边产品企业设计，基于PbootCMS内核开发。采用现代化响应式布局，适配各类移动设备，能够专业展示各类电子产品配件参数、应用场景和技术特点。模板内置多种产品展示模块，满足不同类型配件企业的展示需求。查看源码
(PC+WAP)蓝色弹簧针厂家探针充电连接器设备网站源码下载基于PbootCMS开发的响应式模板，为弹簧针、探针连接器等电子元器件企业设计。模板采用工业蓝主色调，突出产品技术特性，支持多维度展示连接器产品的规格参数与应用场景，帮助制造企业建立专业线上展示平台。查看源码
(自适应)蓝色基建施工工程建筑集团网站pbootcms模板下载为工程建筑、基建施工类企业打造的PbootCMS模板，采用现代化设计理念，突出企业实力与项目展示，帮助建筑类企业快速建立专业在线门户。查看源码
(自适应html5)重工业钢铁机械设备网站pbootcms响应式模板下载为重工业领域打造的响应式网站模板，助力企业高效展示产品与服务，基于PbootCMS开发的工业级网站模板，特别适合钢铁制造、机械设备生产等重工业企业使用。查看源码
(PC+手机)帝国cms7.5漫画图片连载网站源码免费下载本模板基于帝国CMS7.5深度开发，为漫画阅读类网站打造。整体设计风格贴合漫画行业特性，界面布局充分考虑漫画作品的展示需求，支持多种漫画阅读模式。模板采用响应式设计，能够自动适配PC端和移动端设备，为读者提供流畅的阅读体验。查看源码