SIYUCMS翻页样式，

页码图:

 

 

 

siyuCMS的页码标签:

　　{$page|raw} 

显示出来的html代码是:

<ul class="pagination">
    <li class="disabled"><span>«</span></li>
    <li class="active"><span>1</span></li>
    <li><a href="/index/news.html?page=2">2</a></li>
    <li><a href="/index/news.html?page=3">3</a></li>
    <li><a href="/index/news.html?page=4">4</a></li>
    <li><a href="/index/news.html?page=5">5</a></li>
    <li><a href="/index/news.html?page=6">6</a></li>
    <li><a href="/index/news.html?page=2">»</a></li>
</ul>

  样式代码:

  <style>
    .pagination li span {
        position: relative;
        display: inline-block;
        line-height: 38px;
        font-size: 15px;
        height: 40px;
        width: 40px;
        color: #666666;
        font-weight: 500;
        text-align: center;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        text-transform: capitalize;
        border-radius: 50%;
        font-family: "Roboto", sans-serif;
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .pagination li.active span {
        color: #ffffff;
        border-color: #3fbeb5;
        background-color: #3fbeb5;
    }

    .pagination .pagination {
        display: block;
    }



    .pagination {
        position: relative;
        margin-top: 30px;
    }

    .pagination li {
        position: relative;
        display: inline-block;
        margin: 0 8px 0 0;
    }

    .pagination li:last-child {
        margin-right: 0;
    }

    .pagination li a {
        position: relative;
        display: inline-block;
        line-height: 38px;
        font-size: 15px;
        height: 40px;
        width: 40px;
        color: #666666;
        font-weight: 500;
        text-align: center;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        text-transform: capitalize;
        border-radius: 50%;
        font-family: "Roboto", sans-serif;
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .pagination li a:hover,
    .pagination li a.active {
        color: #ffffff;
        border-color: #3fbeb5;
        background-color: #3fbeb5;
    }

/* XIAOHE QQ496631085 请插入CSS里或者到页面 */

</style>

 

 

 

来源：oschina

链接：https://my.oschina.net/u/4316165/blog/4463336