小新的笔记 时间是由分秒积成的,善于利用零星时间的人,才会做出更大的成绩来。——华罗庚
博主 小新的笔记
粤ICP备2024299964号博主 2024年10月28日 在线自豪地使用 Typecho 建站搭配使用 🌻Sunny 主题当前在线 11 人
歌曲封面 未知作品

粤ICP备2024299964号

网站已运行 1 年 101 天 17 小时 6 分

Powered by Typecho & Sunny

12 online · 114 ms

Title

TP5分页样式

小新

·

·

468次阅读
前端
Article
⚠️ 本文最后更新于2024年08月14日,已经过了473天没有更新,若内容或图片失效,请留言反馈

TP5自带分页给我生成了一串分页的代码,但是没有样式有什么用
简单美化了一下,算不上非常好看,还算过得去吧~

♾️ text 代码:
/* 分页 */
ul.pagination {
    width: 100%;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 10px;
    background: #fff;
    justify-content: center;
}
.pagination a{
    text-decoration: none;
    margin-right: 0px!important;
}
ul.pagination li {
    display: inline;
}
.disabled ,.pagination  .active, .pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
}
.pagination .active{
    background-color: #5874d8;
    color: white;
    border: 1px solid #5874d8;
}  
.disabled{
    background-color: rgba(236, 236, 236, 0.78);
}
ul.pagination  a.active {
    background-color: #5874d8;
    color: white;
    border: 1px solid #5874d8;
}
ul.pagination li a:hover:not(.active) {
    background-color: #ddd;
}
现在已有 0 条评论,0 人点赞

广告

页底广告 页底广告
Comment:共0条
发表
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 不再显示
博主