作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图作业</title>
<style>
.p1{
height: 45px;
width: 120px;
}
.box1{
background-image: url(雪碧图.png);
height:45px;
width:120px;
margin: auto;
}
.box1:hover{
height: 38px;
width: 111px;
background-position: -10px -48px;
}
.box1:active{
height: 30px;
width: 96px;
background-position: -10px -88px;
}
.p2{
height: 30px;
width: 42px;
}
.box2{
height: 30px;
width: 42px;
background-image: url(雪碧图.png);
background-position: -59px -339px;
}
.box2:hover{
height: 30px;
width:40px;
background-position: -130px -336px;
}
.box2:active{
height: 33px;
width:42px;
background-position: -7px -335px;
}
</style>
</head>
<body>
<div class="p1">
<div class="box1"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图作业</title>
<style type="text/css">
.p1{
height: 30px;
width: 42px;
}
.box1{
height: 30px;
width: 42px;
background-image: url(雪碧图.png);
background-position: -59px -339px;
}
.box1:hover{
height: 30px;
width:40px;
background-position: -130px -336px;
}
.box1:active{
height: 33px;
width:42px;
background-position: -7px -335px;
}
</style>
</head>
<body>
<div class="p1">
<div class="box1"></div>
</div>
</body>
</html>
hhhh.png
11277949-1af67c9add35ac14.png
11277949-e677ef84a5dc82ef.png
11277949-0fefc5bf51735aec.png
网友评论