html代码:
<div class="box">
<a href="#" class="prve"> <<前一页</a>
<a href="#" class="cur">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="cur">...</a>
<a href="#" class="next">>>后一页</a>
到第
<input type="tel" name="" />
页
<button type="button">确定</button>
</div>
css样式代码:
*{
padding: 0; /* 清除内外边距 */
margin: 0;
}
.box{
text-align: center;
margin: 200px auto;
}
.box a{
display: inline-block; /* 将a转为行内快元素,并给他设置宽和高 */
width: 25px;
height: 25px;
border: 1px solid #ccc;
text-align: center;
line-height: 25px; /* 将行高和高度设为一致,使它垂直居中 */
text-decoration: none;
color: #333;
}
.box .prve, /* 考虑到权重 */
.box .next{
width: 80px;
height: 25px;
font-size: 14px
}
.box .cur{
border: none;
}
.box input{
width: 55px;
height: 23px;
outline: none; /* 取消轮廓属性 */
}
.box button{
width: 40px;
height: 25px;
font-size: 14px;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
}