分页按钮如何实现
时间: 2023-07-02 20:13:44 浏览: 63
分页按钮可以通过HTML和CSS来实现。一种常见的实现方式是使用`<ul>`和`<li>`元素来创建一个列表,每个列表项表示一个分页按钮,然后通过CSS设置样式来实现分页按钮的效果。下面是一个示例代码:
```
<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>
<style>
.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
.pagination li {
display: inline;
margin: 0 5px;
}
.pagination li a {
color: #333;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-decoration: none;
}
.pagination li a:hover {
background-color: #f2f2f2;
}
.pagination .active a {
background-color: #007bff;
color: #fff;
}
</style>
```
在上面的示例中,使用了`<ul>`和`<li>`元素创建了一个分页按钮列表。通过CSS设置了列表和列表项的样式,包括内边距、外边距、边框、背景色等。其中,使用了`:hover`伪类和`.active`类来设置鼠标悬停和当前页样式。