<!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">
<title>分布布局</title>
<style type="text/css">
.con{
width: 580px;
height: 48px;
border: 1px solid black;
margin: 50px auto;
text-align: center;
font-size: 0;
background: #f2f2f2;
}
.con a{
display: inline-block;
font-size: 16px;
font-family: 'Microsoft Yahei';
background:dodgerblue;
margin:10px 10px;
text-decoration: none;
padding:0 5px;
}
.con span{
display: inline-block;
font-size: 16px;
font-family: 'Microsoft Yahei';
}
.con a:hover{
color: red;
}
</style>
</head>
<body>
<div class="con">
<span><<</span>
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<span>....</span>
<a href="">11</a>
<a href="">12</a>
<a href="">13</a>
<a href="">14</a>
<span>>></span>
<a href="">下一页</a>
</div>
</body>
</html>
成果展示：
image.png
