                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧圖應(yīng)用

為什么我的雪碧圖不會改變

<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>服裝內(nèi)衣</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>書記數(shù)碼</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>