HTML5第五课时,雪碧图的应用!!

html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        /*container加空格,表示这个iddiv下的子类所有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>

你可能感兴趣的:(HTML5)