话不多说,先上个效果图:
接下来是代码:(利用边框属性做的,相信你们看完之后一定会理解的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
.page a{
border: 1px solid #ff9600;
padding: 5px 5px;
text-decoration: none;
color: black;
}
.page .lue {
color: #ff9600;
}
.page .current{
color:#ff9600;
border:1px solid #ff9600;
padding:5px 5px;
background: #ffbe94;
}
.page .pre{
border:1px solid #ffe3c6;
color: #ffe3c6;
padding:5px 5px;
}
.page{
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<span class="pre"><</span>
<span class="current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<span class="lue">...</span>
<a href="#">199</a>
<a href="#">200</a>
<a href="#">></a>
</div>
</body>
</html>
-----------------------------------------------------分割线----------------------------------------------------
每天进步一点点。