html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="zuoye.css">
<title>2018-12-28作业</title>
</head>
<body>
<!--
-->
<div class="nav">
<ul>
<li><a href="#">首页 |</a></li>
<li><a href="#"> 网络建设 | </a></li>
<li><a href="#"> 网络建设 | </a></li>
<li><a href="#"> 网络建设 | </a></li>
<li><a href="#"> 网络建设 | </a></li>
<li><a href="#"> 网络建设 | </a></li>
<li><a href="#"> 网络建设 | </a></li>
<li><a href="#">网络建设</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li><a href="#">上一页</a></li>
<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><span>...</span></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</body>
</html>
css中的代码
.pagination{
width: 960px;
height: 42px;
border: 1px green solid;
margin:600px auto;
list-style: none;
text-align: center;
font-size: 0;
}
.pagination li,span{
display: inline-block;
margin: 7px 6px 0;
/*background-color: grey;*/
}
.pagination a{
text-decoration: none;
display: inline-block;
padding: 7px 9px;
font-size: 12px;
line-height: 12px;
color: #393c35;
background-color: gold;
}
.pagination span{
text-decoration: none;
display: inline-block;
font-size: 12px;
line-height: 12px;
}
.pagination li a:hover{
color: red;
text-decoration: underline;
}
.pagination li span:hover{
color: red;
text-decoration: underline;
}
.nav{
width: 960px;
height: 42px;
border:1px grey solid;
margin: 20px auto;
list-style: none;
font-size: 0;
text-align: center;
}
.nav li{
display: inline-block;
margin:7px 7px 0;
}
.nav a{
color: #999;
text-decoration: none;
display:inline-block;
padding: 10px 15px;
font-size: 14px;
line-height: 16px;
}
.nav a:hover{
color: black;
text-decoration: underline;
}