HTML 的静态网页分页样式
page.css代码如下:
#page-normal{
color:#ff9655;
text-align:center;
font-size:0px;
}
#page-normal a{
border:1px solid #ff9600;
padding:5px 7px;
color:#ff9655;
text-decoration:none;
font-size:15px;
margin-right:10px;
}
#page-normal a:hover{
border:1px solid #ff9600;
padding:5px 7px;
background-color:#ffbe94;
}
#page-prev{
border:1px solid #ff9600;
color:#ff9600;
padding:5px 7px;
font-size:15px;
margin-right:10px;
}
#page-prev i{
margin-right:5px;
}
#page-next i{
margin-left:5px;
}
#page-current{
border:1px solid #ff9600;
padding:5px 7px;
background-color:#ffbe94;
font-size:15px;
margin-right:10px;
}
#page-ellipsis{
font-size:15px;
margin-right:10px;
}
main.html代码如下：
<head><link href="../css/page.css" rel="stylesheet" type="text/css"></head>
<body>
<div id="page-normal">
<span id="page-prev"><i></i>上一页</span>
<span id="page-current">1</span>
<a herf="#">2</a>
<a herf="#">3</a>
<a herf="#">4</a>
<a herf="#">5</a>
<a herf="#">6</a>
<a herf="#">7</a>
<span id="page-ellipsis">...</span>
<a herf="#">148</a>
<a herf="#">149</a>
<a herf="#">150</a>
<a id="page-next" href="#">下一页<i></i></a>
</div>
</body>