<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页页码的制作</title>
<style>
.page_normal {
color: #ff6500;
text-align: center;
font-size: 0; // 先设置size为0
}
/* 提取公共属性 */
.page_normal a,
.page_normal .page_current,
.page_normal .page_disabled {
padding: 5px 7px;
font-size: 18px;
margin-left: 10px;
}
.page_normal a {
border: 1px solid #ff9600;
color: #ff6500;
text-decoration: none;
}
/* 与上面a标签一样的属性，可以不要在写 */
.page_normal a:hover {
border: 1px solid #ff6500;
background: #ffbe94;
}
.page_normal .page_current {
border: 1px solid #ff6500;
color: #ff6500;
background: #ffbe94;
}
.page_normal .page_disabled {
border: 1px solid #ffe3c6;
color: #ffe3c6;
}
.ellipsis {
font-size: 14PX;
color: #ff6500;
margin-left: 6px;
}
/* 给i标签，添加图片并显示 */
.page_normal i {
display: inline-block;
width: 5px;
height: 9px;
/* background: url(../shoufengqin/image/d1.png); */
background: url(http://img.mukewang.com/547fdbc60001bab900880700.gif);
}
.page_disabled i {
background-position:-80px -608px;
margin-right: 5px;
}
.page_next i {
background-position:-62px -608px;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="page_normal">
<!-- 使用i标签，添加上一页左边的箭头图标。 -->
<span class="page_disabled"><i></i>上一页</span>
<span class="page_current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<span class="ellipsis">...</span>
<a href="#">98</a>
<a href="#">99</a>
<a href="#">100</a>
<a href="#" class="page_next">下一页<i></i></a>
</div>
</body>
</html>
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
