web前端——分页小练习 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{
				width: 17px;
				height: 20px;
				font:12px/20px "宋体";
				text-align: center;
				text-decoration: none;
				display: inline-block;
				border: 1px solid #e0e1e2;
				color: #2052a3;
			}
			
			.page_btn {
				width: 64px;
				}
			a:hover, .active{
				background-color: #1f3a87;
				color: #fff;
			} 
			
		</style>
	</head>
	<body>
		<div class="pagebox">
			<a href="" class="page_btn">上一页</a>
			<a href="">1</a>
			<a href="">2</a>
			<a href="" class="active">3</a>
			<a href="">4</a>
			<a href="">5</a>
			<a href="">6</a>
			<a href="">7</a>
			<a href="">8</a>
			<a href="">9</a>
			<a href="" class="page_btn">下一页</a>
		</div>
	</body>
</html>

　效果如下图：　

posted @ 2018-03-04 15:57  千行路  阅读(181)  评论(0)  编辑  收藏  举报