制作分页样式可以利用行内块元素的特点实现(不使用浮动)
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
text-align: center;
}
.box a {
text-align: center;
display: inline-block;
width: 40px;
height: 40px;
background-color: #f7f7f7;
border: 1px solid #ccc;
line-height: 40px;
text-decoration: none;
color: black;
}
.box .prev,
.box .next {
width: 100px;
}
.box .current,
.box .elp {
background-color: white;
border: none;
}
.box input {
width: 40px;
height: 40px;
border: 1px solid #ccc;
}
.box button {
width: 40px;
height: 40px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}