css分页效果_asp中数字分页样式

大家好，又见面了，我是你们的朋友全栈君。

CSS 分页实例

简单分页 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

ul.pagination { display: inline-block; padding: 0; margin: 0; }

ul.pagination li {display: inline;}

ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; }

圆角样式 «1234567» 可以使用 border-radius 属性为选中的页码来添加圆角样式:

CSS 实例 ul.pagination li a { border-radius: 5px; }

ul.pagination li a.active { border-radius: 5px; }

鼠标悬停过渡效果 «1234567» 我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

CSS 实例 ul.pagination li a { transition: background-color .3s; }

带边框分页 «1234567» 我们可以使用 border 属性来添加带边框分页:

CSS 实例 ul.pagination li a { border: 1px solid #ddd; /* Gray */ }

圆角边框 提示: 在第一个分页链接和最后一个分页链接添加圆角：

«1234567» CSS 实例 .pagination li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

.pagination li:last-child a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/166961.html原文链接：https://javaforall.cn