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

為什么沒有效果

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>導(dǎo)航</title>
?? ??? ?<style style="text/css">
?? ??? ???? *{
?? ??? ???????? margin:0;
?? ??? ???????? padding:0;
?? ??? ???? }
?? ??? ???? .cat{
?? ??? ???????? width:150px;
?? ??? ???????? border:1px solid #bbb;
?? ??? ???????? background:#f8f8f8;
?? ??? ???? }
?? ??? ???? ul li{
?? ??? ???????? list-style:none;
?? ??? ???????? border-bottom:1px solid #dedede;
?? ??? ???????? height:30px;
?? ??? ???????? line-height:30px;
?? ??? ???????? overflow:hidden;
?? ??? ???? }
?? ??? ???? .cat ul li i{
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 30px;
?? ??? ??? ??? ?height:24px;
?? ??? ??? ??? ?margin: 3px 3px 0 0;
?? ??? ??? ??? ?background: url(images/sp.png) no-repeat;
?? ??? ???? }
?? ??? ???? ul li h3{
?? ??? ???????? font-size:14px;
?? ??? ???????? font-weight:400;
?? ??? ???? }
?? ??? ????? .cat_1 i{
?? ??? ??? ??? ?background-position: 0 0;
?? ??? ???? }
?? ??? ????? .cat_2 i{
?? ??? ??? ??? ?background-position: 0 -24px;? ?
?? ??? ???? }
?? ??? ????? .cat_3 i{
?? ??? ??? ??? ?background-position: 0 -48px;
?? ??? ???? }
?? ??? ????? .cat_4 i{
?? ??? ??? ??? ?background-position: 0 -72px;
?? ??? ???? }
?? ??? ????? .cat_5 i{
?? ??? ??? ??? ?background-position: 0 -96px;
?? ??? ???? }
?? ??? ????? .cat_6 i{
?? ??? ??? ??? ?background-position: 0 -120px;
?? ??? ???? }
?? ??? ????? .cat_7 i{
?? ??? ??? ??? ?background-position: 0 -144px;
?? ??? ???? }
?? ??? ?????? .cat_8 i{
?? ??? ??? ??? ?background-position: 0 -168px;
?? ??? ???? }
?? ??? ?</style>
??? </head>
<body>

<div class="cat">
??? <ul>
??????? <li class="cat_1">
??????????? <i></i>
??????????? <h3>服裝內(nèi)衣</h3>
??????? </li>
??????? <li class="cat_2">
??????????? <i></i>
??????????? <h3>鞋包配飾</h3>
??????? </li>
??????? <li class="cat_3">
??????????? <i></i>
??????????? <h3>運(yùn)動(dòng)戶外</h3>
??????? </li>
??????? <li class="cat_4">
??????????? <i></i>
??????????? <h3>珠寶手表</h3>
??????? </li>
??????? <li class="cat_5">
??????????? <i></i>
??????????? <h3>手機(jī)數(shù)碼</h3>
??????? </li>
??????? <li class="cat_6">
??????????? <i></i>
??????????? <h3>家電辦公</h3>
??????? </li>
??????? <li class="cat_7">
??????????? <i></i>
??????????? <h3>護(hù)膚彩妝</h3>
??????? </li>
??????? <li class="cat_8">
??????????? <i></i>
??????????? <h3>母嬰用品</h3>
??????? </li>
??? </ul>
</div>
</body>
</html>