迅睿CMS框架是一款PHP8高性能·简单易用的CMS开源开发框架,基于MIT开源许可协议发布,免费且不限制商业使用,是免费开源的产品,以万端互联为设计理念,支持的微信公众号、小程序、APP客户端、移动端网站、PC网站等多终端式管理系统。
联系官方销售客服
1835022288
028-61286886
模板标签里面
列表页的这种翻页代码是多少,怎么做的
分页标签变量写法:
{$pages}
系统会自动生成分页html文件,查看源代码可以看出效果:
<ul class="pagination"> <li><span class='page-numbers current'>1</span></li> <li><a class="page-numbers" target="_blank" href="/news/index_2.html">2</a></li> <li><a class="page-numbers" target="_blank" href="/news/index_3.html">3</a></li> <li><a class="page-numbers" target="_blank" href="/news/index_4.html">4</a></li> <li><a class="page-numbers" target="_blank" href="/news/index_5.html">5</a></li> <li><a class="page-numbers" target="_blank" href="/news/index_6.html">6</a></li> <li><a class="page-numbers" target="_blank" href="/news/index_2.html" >下一页</a></li> </ul>
针对这种系统生成出来的分页样式,如果没写css的话,访问页面就会错乱效果,如下图:
解决方案:
方案一、懒人方案
1、直接把下面的css复制到你的css文件中
.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; line-height: 1.42857; text-decoration: none; color: #337ab7; background-color: #fff; border: 1px solid #ddd; margin-left: -1px; } .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus { z-index: 2; color: #23527c; background-color: #eeeeee; border-color: #ddd; } .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { z-index: 3; color: #fff; background-color: #337ab7; border-color: #337ab7; cursor: default; }
2、再访问页面,效果如下:
方案二、个性化方案,自定义分页样式方案
https://www.xunruicms.com/doc/571.html
分页标签变量写法:
系统会自动生成分页html文件,查看源代码可以看出效果:
针对这种系统生成出来的分页样式,如果没写css的话,访问页面就会错乱效果,如下图:
解决方案:
方案一、懒人方案
1、直接把下面的css复制到你的css文件中
2、再访问页面,效果如下:
方案二、个性化方案,自定义分页样式方案
https://www.xunruicms.com/doc/571.html