简单分页
如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。
<!DOCTYPE html>
<html>
<head>
<title>自学教程(如约智惠.com)</title>
<meta charset="utf-8">
<style>
ul.pagination {
display:inline-block;
padding:0px;
margin:0px;
}
ul.pagination li {
display:inline;
}
ul.pagination li a {
color:black;
float:left;
padding:8px 16px;
text-decoration:none;
}
</style>
</head>
<h2>简单的分页</h2>
<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><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<body >
</body>
</html>
点击及鼠标悬停分页样式
如果点击当前页,可以使用 .active 来设置当期页样式,鼠标悬停可以使用 :hover 选择器来修改样式:
<!DOCTYPE html>
<html>
<head>
<title>自学教程(如约智惠.com)</title>
<meta charset="utf-8">
<style>
ul.pagination {
display:inline-block;
padding:0px;
margin:0px;
}
ul.pagination li {
display:inline;
}
ul.pagination li a {
color:black;
float:left;
padding:8px 16px;
text-decoration:none;
}
ul.pagination li a.active {
background-color:#4CAF50;
color:white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<<h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上。</p>
<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><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<body >
</body>
</html>
圆角样式
可以使用 border-radius 属性为选中的页码来添加圆角样式:
<!DOCTYPE html>
<html>
<head>
<title>自学教程(如约智惠.com)</title>
<meta charset="utf-8">
<style>
ul.pagination {
display:inline-block;
padding:0px;
margin:0px;
}
ul.pagination li {
display:inline;
}
ul.pagination li a {
color:black;
float:left;
padding:8px 16px;
text-decoration:none;
border-radius: 5px;
}
ul.pagination li a.active {
background-color:#4CAF50;
color:white;
border-radi