<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page-area ul li{
display: inline-block;/*inlineblock就可以在一行显示，或者float都可以*/
}
.page-area ul li a{
display: inline-block;
color: #369;
height: 34px;
line-height: 34px;
text-align: center;
width: 34px;
border: 1px solid #e1e1e1;
border-radius: 15%;
margin-left: 5px;
}
.page-area ul li a.page-next{
width: 90px;
}
.page-area ul li a:hover{
background-color: #369;/*background是写url的（‘’）*/
color: white;
}
</style>
</head>
<body>
<div class="page-area">
<ul>
<li><span class="current-page">1</span></li>
<li><a href="#" class="page-a">2</a></li>
<li><a href="#" class="page-a">3</a></li>
<li><a href="#" class="page-a">4</a></li>
<li><a href="#" class="page-a">5</a></li>
<li><a href="#" class="page-a">6</a></li>
<li><a href="#" class="page-a">7</a></li>
<li><a href="#" class="page-a">8</a></li>
<li><a href="#" class="page-a">9</a></li>
<li><a href="#" class="page-a">10</a></li>
<li><a href="#" class="page-a page-next">下一页</a></li>
</ul>
</div>
</body>
</html>
