                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧图应用

为什么我的雪碧图不会改变

<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>
*{margin:0;padding:0;}/*盒子模型都有默认的margin和padding值*/
.cat
{
    width:180px;
    border:1px solid #999;
    box-shadow:0 0 5px #ccc;
    border-radius:10px;
    margin:10px auto;
}
.cat li{
    list-style:none;
}
h3
{
    font-weight:normal;
    font-size:15px;
    font-family:'微软雅黑';
}
.cat li a
{
    display:block;
    color:#000;
    text-decoration:none;
    padding:8px 0;
    margin:0 8px;
    border-bottom:1px solid #ccc;
}
.cat li a:hover{background:lavender;}
.cat li i
{
    display:inline-block;
    width:40px;
    height:24px;
    background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg) no-repeat;
    float:left;
    margin-right:12px;
}
.cat2 li i
{
    background-position:0 -48px;
}
.cat3 li i
{
    background-position:0 -72px;
}
</style>
</head>
<body>
<div>
    <ul class='cat'>
        <li class='cat1'><a href="#"><i></i><h3>服装内衣</h3></a></li>
        <li class='cat2'><a href="#"><i></i><h3>鞋包配饰</h3></a></</li>
        <li class='cat3'><a href="#"><i></i><h3>运动户外</h3></a></li>
        <li class='cat4'><a href="#"><i></i><h3>珠宝手表</h3></a></li>
        <li class='cat5'><a href="#"><i></i><h3>书记数码</h3></a></li>
        <li class='cat6'><a href="#"><i></i><h3>加电办公</h3></a></li>
        <li class='cat7'><a href="#"><i></i><h3>护肤彩妆</h3></a></li>
        <li class='cat8'><a href="#"><i></i><h3>母婴用品</h3></a></li>
    </ul>
</div>
</body>
</html>