Title

分享一个TP5分页样式

  • 作者:Mr_Yan
  • php
  • 时间:2018-05-09 04:44:39
  • 662人已阅读

个人感觉tp5自带的分页样式不怎么好看

因此自己写了一个样式


只需要在HTML页添加如下样式即可

<style>
    .pagination {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .pagination li {
        margin: 0px 10px;
        border: 1px solid #e6e6e6;
        padding: 3px 8px;
        display: inline-block;
    }

    .pagination .active {
        background-color: #46A3FF;
        color: #fff;
    }

    .pagination .disabled {
        color: #aaa;
    }

    .button {
        background-color: blueviolet; /* Green    red  orange  blueviolet  cadetblue  blue  */
        border: none;
        color: white;
        padding: 3px 5px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 10px;
        margin: 8px;
    }

    .uts {
        margin: 0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        word-break:keep-all;
    }
</style>

效果如下

image.png

本文为MrYan原创文章,转载无需和我联系,但请注明来自MrYan个人博客:www.mryan888.com

文章评论

Top