老湿讲的很清楚！谢谢老湿，学的很轻松！

奉化奔腾JAVA

2015-07-18

源自：分页页码制作 4-2

关注问题我要回答

996

操作

收起

2 回答

慕粉4282285
2017-03-30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页页码--加入小图标</title>
<style type="text/css">

/* 作业代码 Start */
.page-disabled i, 
.page-next i {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 6px;
}
.page-disabled i {
    margin-right: 8px;
    border-color: transparent #CCC transparent transparent;
}
.page-next i {
    margin-left: 8px;
    border-color: transparent transparent transparent #ff6400;
}
/* 作业代码 End */

.page-icon{
    margin:20px 0 0 0;
    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;
}
.page-icon a{
	text-decoration:none;
	color:#005aa0;
}
.page-current{
	color:#ff6600;
	padding:4px 10px 5px;
	font-size:14PX;
}
.page-disabled{
	color:#ccc;
}
.ellipsis{
    font-size:14PX;
    padding:4px 5px;
}
</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>
    <span class="ellipsis">...</span>
    <a href="#">199</a>
    <a href="#">200</a>
    <a class="page-next" href="#">下一页<i></i></a>
</div>

</body>