TP5自带分页给我生成了一串分页的代码,但是没有样式有什么用
简单美化了一下,算不上非常好看,还算过得去吧~
/* 分页 */
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;
}