迅睿cms模板如何自定义分页css样式

迅睿cms中列表页面分页标签变量写法是分页标签变量是{$pages}系统会自动生成分页html代码，针对这种系统生成出来的分页样式，如果没写css的话，访问页面就会错乱效果。针对这种情况，今天提供两个解决方案。

懒人方案

直接把下面的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; }

个性化方案

自定义分页样式需要修改全局配置文件，电脑端前端分页样式是config>page>pc/page.php文件，移动端前端分页样式是config>page>mobile/page.php文件。分页配置文件完整参数解析如下：

<?php

/**
 * 自定义分页标签样式
 */

return array(

   // 自定义“统计”链接
   'total_link' => '共%s条', // 你希望在分页中显示“统计”名字链接。如果你不希望显示，可以把它的值设为 FALSE 
   'total_tag_open' => '<li><a>', // “统计”打开标签链接
   'total_tag_close' => '</a></li>', // “统计”关闭标签链接
   //'total_remove_anchor' => true, // “统计”链接移除a标签
   'total_anchor_class' => '', // 加a标签的class，留空采用anchor_class属性
   
   // 自定义“下一页”链接
   'next_link' => '下一页', // 你希望在分页中显示“下一页”链接的名字。如果你不希望显示，可以把它的值设为 FALSE 
   'next_tag_open' => '<li>', // “下一页”链接的打开标签
   'next_tag_close' => '</li>', // “下一页”链接的关闭标签
   'next_anchor_class' => '', // 加a标签的class，留空采用anchor_class属性
   
   // 自定义“上一页”链接
   'prev_link' => '上一页', // 你希望在分页中显示“上一页”链接的名字。如果你不希望显示，可以把它的值设为 FALSE 
   'prev_tag_open' => '<li>', // “上一页”链接的打开标签
   'prev_tag_close' => '</li>', // “上一页”链接的关闭标签
   'prev_anchor_class' => '', // 加a标签的class，留空采用anchor_class属性
   
   // 自定义“当前页”链接
   'cur_tag_open' => '<li class="active"><a>', // “当前页”链接的打开标签
   'cur_tag_close' => '</a></li>', // “当前页”链接的关闭标签
   
   // 自定义“数字”链接
   'num_tag_open' => '<li>', // “数字”链接的打开标签
   'num_tag_close' => '</li>', // “数字”链接的关闭标签
   'num_anchor_class' => '', // 加a标签的class，留空采用anchor_class属性
   
   // 自定义“最后一页”链接
   'last_link' => '最后一页', // 你希望在分页的右边显示“最后一页”链接的名字。如果你不希望显示，可以把它的值设为 FALSE
   'last_tag_open' => '<li>', // “最后一页”链接的打开标签
   'last_tag_close' => '</li>', // “最后一页”链接的关闭标签
   'last_anchor_class' => '', // 加a标签的class，留空采用anchor_class属性
   
   // 自定义“第一页”链接
   'first_link' => '第一页', // 你希望在分页的左边显示“第一页”链接的名字。如果你不希望显示，可以把它的值设为 FALSE
   'first_tag_open' => '<li>', // “第一页”链接的打开标签
   'first_tag_close' => '</li>', // “第一页”链接的关闭标签
   'first_anchor_class' => '', // 加a标签的class，留空采用anchor_class属性
   
   // 是否显示数字链接
   'display_pages' => TRUE,

    // 显示的分页左右两边数字个数，比如4表示显示4+1+4个数字
    'num_links' => 4,

    // 给每一个链接添加class属性
   'anchor_class' => '',
   
   // 给每一个链接添加data-ci-pagination-page属性，设置''表示不加链接属性
   'data_page_attr' => 'data-ci-pagination-page', 
   
   // 区域标签
    'full_tag_open' => '<ul class="pagination">',

   // 区域标签
    'full_tag_close' => '</ul>',
    
    // 是否强制显示分页，默认情况下当分页数量不足两页时就不会显示分页字符 v4.3.13以上版本支持
    'compel_page' =>  false,
    
    // 是否强制显示上一页，默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_prev_page' =>  false,
    
    // 是否强制显示下一页，默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_next_page' =>  false,
    
    // 是否强制显示最后一页，默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_last_page' =>  false,
    
    // 是否强制显示第一页，默认情况下当链接重复时就不会显示重复的链接 v4.3.13以上版本支持
    'compel_first_page' =>  false,
   
);

前端模板结合这个分页配置文件，就可以自定义样式了，css样式可以根据实际情况写到li 或者 a标签中即可。

个性化常用样式

.pagination {}
.pagination > li {}
.pagination > li > a{}
.pagination > .active > a, .pagination > li > a:hover { }

天客隆模板网管理员

扫码免费体验 GPT-4 链接