美文网首页
2018-09-11作业

2018-09-11作业

作者: 背对背吧 | 来源:发表于2018-09-11 21:06 被阅读0次

(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>

002.PNG

(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>

004.PNG

(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>


006.PNG

相关文章

网友评论

      本文标题:2018-09-11作业

      本文链接:https://www.haomeiwen.com/subject/tolpgftx.html