分页导航栏-CSDN博客

本文链接：https://blog.csdn.net/Anansoul/article/details/85604657

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="#">首页&nbsp;|</a></li>
	 		<li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
	 		<li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
	 		<li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
	 		<li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
	 		<li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
	 		<li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</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;
}

在这里插入图片描述