您的位置：首页 > Web前端 > HTML5

HTML5第五课时，雪碧图的应用！！

2017-04-12 20:51 295 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
/*container加空格，表示这个id的div下的子类所有div！所有的div，后代选择器。
如果是#container>div,是子代选择器，只影响儿子，不影响其他人，
其中color属性影响无数后代。*/
.container div{
height: 20px;
width: 25px;
background-image: url("../../image/xbt.gif");
background-repeat: no-repeat;
}
#div2{
background-image: url("../../image/xbt.gif");
background-position: -42px -3px;
/*移动图片所在的位置，雪碧图的重要应用方法。*/
}
#div3{
background-image: url("../../image/xbt.gif");
background-position: -165px -30px;
}
</style>
<title>雪碧图</title>
</head>
<body>
<div class="container">
<div></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航