css 分页样式大全

发布时间:2025-12-10 13:14:55 浏览次数:2

CSS是现代互联网设计中不可或缺的一部分,它可以实现丰富的样式效果,其中之一就是分页样式。在这篇文章中,我们将为您介绍一些常见的CSS分页样式,让您的页面看起来更加专业和美观。

/*-------------------基本样式-------------------*/.page{display:inline-block;background-color:#f8f8f8;border:1px solid #ddd;border-radius:5px;padding:5px 10px;margin:0 2px;color:#666;font-size:14px;text-align:center;cursor:pointer;}.page:hover{background-color:#eee;}.selected{background-color:#007bff;color:#fff;}/*-------------------数字分页-------------------*/.page-num{display:inline-block;}/*-------------------上一页/下一页-------------------*/.prev, .next{display:inline-block;padding:4px 8px;}.prev:hover, .next:hover{background-color:#007bff;color:#fff;}/*-------------------省略号-------------------*/.ellipsis{display:inline-block;width:20px;text-align:center;}/*-------------------带图标分页-------------------*/.page-icon{background-image:url(../images/page-icon.png);background-repeat:no-repeat;background-position:0 -40px;display:inline-block;width:32px;height:32px;text-indent:-9999px;}.page-prev{background-position:0 -80px;}.page-next{background-position:0 -120px;}/*-------------------带边框分页-------------------*/.page-border{border:none;padding:0;margin:0;border-radius:0;}.page-border:hover{background-color:#eee;}.page-border.selected{background-color:#007bff;color:#fff;}/*-------------------总页数-------------------*/.total-page{display:inline-block;padding:4px 8px;margin-right:10px;color:#999;}/*-------------------总记录数-------------------*/.total-count{display:inline-block;padding:4px 8px;margin-right:10px;color:#999;}

现在您已经了解了一些常见的CSS分页样式,可以根据自己的需求进行选择和修改。比如,数字分页在您需要直观的显示当前页码时非常好用,而带图标分页则适合需要在分页的左右两侧添加一些特殊按钮的情况。希望这篇文章能够帮助您实现更加优美的页面效果。

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477