sscms 翻页效果（一）HTML+CSS

最新推荐文章于 2024-08-19 18:01:51 发布

Red_Liu

最新推荐文章于 2024-08-19 18:01:51 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/u011442365/article/details/118994916

版权

STL标签分页前端开发 CSS样式网页布局

关键词由CSDN通过智能技术生成

效果一：如下图
在这里插入图片描述

<ul class="pagination">
<stl:pageItems>
   <li><a href="{PageItem.PreviousPage}">上一页</a></li>
	<stl:pageItem type="PageNavigation">
	<stl:yes><li><a href="{Current.Url}">{Current.Num}</a></li></stl:yes>
	<stl:no><li class="active"><a>{Current.Num}</a></li></stl:no>
	</stl:pageItem>
	<li><a href="{PageItem.NextPage}">下一页</a></li>
	<li> 共 {pageItem.TotalPageNum} 页</li>
</stl:pageItems>
</ul>

CSS层叠样式表：

.pagination{
    margin: 40px auto 10px;
    text-align: center;
    display: table;
    border:1px solid #ddd;
    padding:0px 10px 0px 10px;
}
.pagination li{
    display: inline-table;
    padding:10px 5px 10px 5px;
    margin:0px 5px 0px 5px;
    font-size: 14px;
}
.pagination .active a{
    font-weight: bold;
    color: rgb(105, 0, 0);
    border-bottom: 1px solid rgb(105, 0, 0);
}