迅睿文章列表页分页标签使用教程

我使用的是官方默认的分页样式，经过微调后的效果如下图：

使用方法：

第一步：首先在列表区域使用循环标签：（必须使用这个标签才能生效）

{module catid=$catid  order=updatetime page=1 return=rs}
{$rs.title}
{dr_strcut($rs.description, 500)}...
{/module}

第二步：在分页位置插入分页标签：

{$pages_rs}

第三步：加入CSS样式：

.pagination {
    display: inline-block;
    padding-left: 30%;
    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: 10px; }
.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; }

完成！

上一篇： 宝塔面板设置IP黑名单的两个方法

下一篇： 实现百度编辑器代码高亮的简单小方法