thinkphp框架和laravel框架都是国内知名的、使用量超大的框架,在每个网站应用中都会涉及到列表页面,但是在实际开发过程中,我们会遇到页面展示的分页没有css样式,表现的非常的丑。下面分享出一套css样式,可以展现出较好看的样式效果。
样式如下:
#page {
background-color: #FFF;
text-align: center;
height: 75px;
display: block;
}
#page .pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
#page .pagination > li {
display: inline;
}
#page .pagination li.disabled,
#page .pagination li.active {
cursor: not-allowed;
}
#page .pagination > li:first-child > a, .pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#page .pagination > li > a, .pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #616161;
text-decoration: none;
background-color: #fff;
border: 1px solid #d0d0d0;
}
#page .pagination > li:last-child > a, .pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
#page .pagination li.active span {
background-color: #009688;
color: #FFF;
}