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

最新推荐文章于 2023-11-11 22:53:18 发布

甲戌天火

最新推荐文章于 2023-11-11 22:53:18 发布

阅读量567

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/70147382

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

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

甲戌天火

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5第五课时，雪碧图的应用！！

html>html>head lang="en"> meta charset="UTF-8"> style> /*container加空格，表示这个id的div下的子类所有div！所有的div，后代选择器。如果是#container>div,是子代选择器，只影响儿子，不影响其他人，其中color属性影响无数后代。*/
复制链接

扫一扫

专栏目录