thinkcmf模板之分页CSS样式

基于Thinkcmf5.1框架的前端模板列表页通用分页样式

HTML代码：（直接插入到需要显示分页的位置）

<div class="uni-page">
        <ul class="pagination">
            <page/>
        </ul>
        <div class="layui-clear"></div>
</div>

CSS样式：

.uni-page {
    padding: 10px 0;
    text-align: center;
}

.uni-page .pagination {
    display: inline-block;
}

.uni-page .pagination .page-item {
    float: left;
    display: inline-block;
    margin-right: 10px;
}

.uni-page .pagination .page-item:last-child {
    margin-right: 0;
}

.uni-page .pagination .page-item .page-link {
    display: block;
    height: 26px;
    min-width: 26px;
    line-height: 26px;
    padding: 0 7px;
    border: 1px solid #E6E6E6;
    border-radius: 3px;
    font-size: 12px;
    color: #666;
    text-align: center;
    transition: all .25s;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.uni-page .pagination .page-item:not(.disabled) .page-link:hover {
    background-color: #ff5722;
    border-color: #ff5722;
    color: #fff;
    transition: all .25s;
}

.uni-page .pagination .active.page-item.disabled .page-link {
    background-color: #ff5722;
    border-color: #ff5722;
    color: #fff;
}

分页颜色风格可以根据自己的需要进行修改。