html里分页一页控制个数,css如何实现数字分页效果代码及步骤
时间: 2024-02-11 17:03:40 浏览: 27
要实现数字分页效果,可以使用CSS样式和HTML标签配合实现。
首先,在HTML中要使用`<ul>`和`<li>`标签来创建一个无序列表,每个`<li>`标签代表一个分页按钮。如下所示:
```html
<ul class="pagination">
<li><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>
```
然后,在CSS中对这个无序列表进行样式设置,例如设置样式为inline-block,以及设置每个分页按钮的样式等。如下所示:
```css
.pagination {
display: inline-block;
margin-left: 0;
border-radius: 4px;
}
.pagination li {
display: inline;
}
.pagination li a {
color: #0275d8;
float: left;
padding: 6px 12px;
line-height: 1.428571429;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
.pagination li.active a {
background-color: #0275d8;
color: #fff;
border-color: #0275d8;
}
.pagination li.disabled a {
color: #ddd;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
```
最后,在JavaScript中动态生成分页按钮,以及设置当前页的样式为active。例如,生成10个分页按钮,每个按钮代表一页,当前页为第5页,代码如下:
```javascript
var pagination = document.querySelector('.pagination');
var pageNum = 10; // 总页数
var currentPage = 5; // 当前页数
for (var i = 1; i <= pageNum; i++) {
var li = document.createElement('li');
var a = document.createElement('a');
a.href = '#';
a.textContent = i;
li.appendChild(a);
pagination.appendChild(li);
}
var activeLi = pagination.querySelector('li:nth-child(' + currentPage + ')');
activeLi.classList.add('active');
```
这样就可以实现一个数字分页效果了。