CSS中分页通常使用伪元素::before
和::after
来实现。具体步骤如下:
/* 设置分页样式 */ .pagination::before, .pagination::after{ content: ''; display: table; } .pagination::after{ clear: both; } /* 设置分页项样式 */ .pagination li{ float: left; margin: 0 5px; } .pagination li a{ display: block; padding: 5px 10px; border: 1px solid #ccc; text-decoration: none; color: #333; } .pagination li.active a{ background-color: #ccc; color: #fff; }
使用以上样式可以设置分页项的样式,但还需要在HTML中添加分页项目,示例如下:
<div class="pagination"> <ul> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div>
其中,<li class="active"><a>
表示当前选中的分页项,可以通过设置.active
类来实现选中效果。当然,分页项的数量和链接地址需要根据实际情况进行设置。