注意:一般会用左中右结构,但是推荐用左右中结构,因为中间宽度自适应。
代码如下:
<style>
.page{
height: 40px;
background-color: yellow;
}
.prev,.next{
width: 30px;
height: 30px;
background-color: red;
margin-top:5px;
}
.prev{
float: left;
}
.next{
float: right;
}
.pageNum{
text-align: center;
padding-top:5px;
}
.pageNum a{
display: inline-block;
height:30px;
line-height:30px;
padding:0 15px;
color:#E01013;
}
.pageNum>a:hover,.pageNum .cur{
background-color: blue;
border-radius: 5px;
color:#fff;
}
</style>
</head>
<body>
<div class="page">
<a href="javascript:;" class="prev">👈</a>
<a href="javascript:;" class="next">👉</a>
<div class="pageNum">
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;" class="cur">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
<a href="javascript:;">6</a>
</div>
</div>
</body>