<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/
*
{
margin:0;
padding:0;
font-size:12px;
font-family:微软雅黑;
}
.page
{
height:40px;
margin-top:50px;
text-align:center;
}
.page a
{
border:1px solid #E8E8E8;
margin:5px;
padding:5px 10px;
display:inline-block;
text-decoration:none;
}
.begin
{
color:#FFF;
background-color:#cc1b1b;
}
.page a:link,.page a:visited
{
color:#000;
}
.page a:hover,.page a:active
{
color:#FFF;
background-color:#cc1b1b;
}
<!--要使鼠标划过时显示小手指也可以在<a>里加上 cursor: pointer;--!>
</style>
</head>
<body>
<!--在此制作页码的基本结构-->
<div class='page'>
<a>首页</a>
<a href='#'><</a>
<a href='#' class='begin'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a href='#'>……</a>
<a href='#'>></a>
<a>尾页</a>
</div>
</body>
</html>
