<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 0 auto;
width: 50%;
height: 100px;
/*border: 1px solid red;*/
text-align: center;
margin-top: 300px;
}
ul.pagination li {
list-style-type: none;
display: inline;
}
ul.pagination li a {
text-decoration: none;
color: black;
padding: 8px 10px; /*10px左右内边距， 8px上下内边距*/
border: 1px solid darkgray;
border-radius: 20px;
}
ul.pagination li a.active {
background: green;
color: white;
}
/*如果类名不为active并且鼠标经过才显示的样式*/
ul.pagination li a:hover:not(.active) {
background: darkseagreen;
border: 1px solid green;
font-size: 19px;
}
</style>
</head>
<body>
<div>
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li>....</li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</body>
</html>
在HTML中进行简单的分页设计
猜你喜欢
转载自blog.csdn.net/qq_43279936/article/details/88083174
今日推荐
周排行