版权声明：最终解释权归属Hern所有，恒！ https://blog.csdn.net/qq_36761831/article/details/84075497
直角分页页码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>直角分页页码</title>
<style type="text/css">
/*设置 a 标签的css样式*/
.page-normal a{
border: 1px solid #ff6500;
padding: 5px 7px;
color: #ff6500;
margin-left: 20px;/*设置标签 a 之间的间隔*/
text-decoration: none;/*去除页码数字下面的下划线*/
}
/*设置鼠标经过时 a 标签的css样式*/
.page-normal a:hover{
background-color: #ffbe94;
}
/*设置整个div的css样式,该样式主要用于设置网页内的省略号 …… 的样式，并且同时设置内容居中显示*/
.page-normal{
color: #ff6500;
text-align: center;
}
/*设置当前页面的css样式*/
.page-normal .page-current{
color: #ffffff;
background-color: #ff6500;
}
/*设置左单括号 < 的css样式*/
.page-normal .page-prev{
color: #ffe3c6;
}
/*进行代码优化，将不同css样式中共有的属性放在一起，有助于提高运行效率*/
.page-normal a, .page-normal a:hover, .page-normal .page-prev, .page-normal .page-current{
border: 1px solid #ff6500;
padding: 5px 7px;
}
</style>
</head>
<body>
<div class="page-normal">
<span class="page-prev"><</span>
<!-- 数字1 代表当前页面-->
<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>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
……
<a href="#">199</a>
<a href="#">200</a>
<a href="#">></a>
</div>
</body>
</html>
运行效果截图
在直角分页码上面加入小图标
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>直角分页页码-有图标的情况</title>
<style type="text/css">
/*设置div样式的整体布局*/
.page-icon{
margin:20px 0 0 0;/*设置距离顶部20像素*/
font-size:0;/*修复行内元素之间空隙间隔*/
text-align:center;/*设置内容居中显示*/
}
/*设置共有的的样式布局，主要是进行代码优化，提高运行效率*/
.page-icon a,.page-disabled,.page-next{
border:1px solid #ccc;
border-radius:3px;
padding:4px 10px 5px;
font-size:14PX;/*修复行内元素之间空隙间隔*/
margin-right:10px;
}
/*对 a 标签进行样式布局 */
.page-icon a{
text-decoration:none;/*取消链接的下划线*/
color:#005aa0;
}
.page-current{
color:#ff6600;
padding:4px 10px 5px;
font-size:14PX;/*修复行内元素之间空隙间隔*/
}
.page-disabled{
color:#ccc;
}
.page-next i,.page-disabled i{
cursor:pointer;/*设置鼠标经过时的显示状态，这里设置的是显示状态为小手状态*/
display:inline-block;/*设置显示的方式为行内块元素*/
width:5px;
height:9px;
background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*获取图标的背景链接*/
}
.page-disabled i{
background-position:-80px -608px;
margin-right:3px;
}
.page-next i{
background-position:-62px -608px;
margin-left:3px;
}
</style>
</head>
<body>
<div class="page-icon">
<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>
<a href="#">7</a>
……
<a href="#">199</a>
<a href="#">200</a>
<a class="page-next" href="#">下一页<i></i></a>
</div>
</body>
</html>
运行效果截图
