学习其他知识_学习联系其他知识-CSDN博客

本文链接：https://blog.csdn.net/lyh176967/article/details/79673658

<!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>Document</title>
<style>
.con {
width: 960px;
height: 40px;
border: 1px solid #d1d1d1;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
}

.con li {
margin: 7px 5px 0;
/*把li转为内联块排成一排*/
display: inline-block;
}
/*把大小的改变加到a上
一般超链接的点击范围要大一些
*/

.con a {
/*转换为内联块才可以增加a标签的大小*/
display: inline-block;
background: gold;
/*14 12*/
padding: 7px 10px;
font-size: 12px;
/*把行高设置和文字一样方便计算a标签的高度*/
line-height: 12px;
color: #393c35;
text-decoration: none;
}

.con a:hover {
color: red;
background-color: blue;
}

.con span {
font-size: 12px;
}
</style>
</head>

<body>

<ul class="con">
<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="">17</a></li>
<li><a href="">18</a></li>
<li><a href="">19</a></li>
<li><a href="">20</a></li>
<li><a href="">下一页</a></li>
</ul>

</body>

</html>