(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>翻页</title>
<style type="text/css">
- {
margin:0;
padding: 0;
}
body{
font: 12px 微软雅黑;
}
.box1{
width: 960px;
height: 42px;
border: 1px solid black;
margin:0px auto;
text-align: center;
padding-top: 20px;
margin-top: 100px;
}
a {
background-color: yellow;
padding: 5px 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<center>
<a href='#'>上一页</a>
<a href='#'>1</a>
<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='#'>10</a>
<a href='#'>11</a>
<a href='#'>12</a>
<a href='#'>13</a>
<a href='#'>14</a>
<a href='#'>15</a>
<a href='#'>16</a>
<a href='#'>17</a>
<a href='#'>18</a>
<a href='#'>19</a>
<a href='#'>20</a>
<a href='#'>下一页</a>
</center>
</div>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>12321</title>
<style type="text/css">
- {
margin:0;
padding: 0;
}
body{
font: 14px 微软雅黑 ;
}
.box{
width: 960px;
height: 42px;
border:1px solid black;
margin: 100px auto;
text-align: center;
padding-top: 20px;
line-height: 20px;
}
a{
overflow: hidden;
padding-left: 20px;
padding-right: 20px;
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div class='box'>
<a href='#'>首页</a> |
<a href='#'>网站建设</a> |
<a href='#'>程序开发</a> |
<a href='#'>网络营销</a> |
<a href='#'>企业VI</a> |
<a href='#'>案例展示</a> |
<a href='#'>联系我们</a>
</div>
</body>
</html>
(3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>12321</title>
<style type="text/css">
- {
margin:0;
padding: 0;
}
.btn{
display: block;
width: 111px;
height: 50px;
background-image: url(amazon-sprite_.png);
background-repeat: repeat;
background-attachment: fixed;
}
.btn1{
display: block;
width: 42px;
height: 30px;
background-position: -10px -340px;
background-image: url(amazon-sprite_.png)
}
.btn1:hover{
background-position: -10px -340px;
}
.btn1:active{
background-position: -58px -338px
}
</style>
</head>
<body>
<a href='#' class='btn'></a>
<a href='#' class='btn1'></a>
</body>
</html>
