为什么没有效果-慕课网

为什么没有效果

来源：3-3 CSS Sprite 应用

街角疯

2017-04-07 13:29

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>导航</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>服装内衣</h3>
        </li>
        <li class="cat_2">
            <i></i>
            <h3>鞋包配饰</h3>
        </li>
        <li class="cat_3">
            <i></i>
            <h3>运动户外</h3>
        </li>
        <li class="cat_4">
            <i></i>
            <h3>珠宝手表</h3>
        </li>
        <li class="cat_5">
            <i></i>
            <h3>手机数码</h3>
        </li>
        <li class="cat_6">
            <i></i>
            <h3>家电办公</h3>
        </li>
        <li class="cat_7">
            <i></i>
            <h3>护肤彩妆</h3>
        </li>
        <li class="cat_8">
            <i></i>
            <h3>母婴用品</h3>
        </li>
    </ul>
</div>
</body>
</html>

设置的背景定位属性不管用，为啥？

写回答关注

2回答

侠客岛的含笑

2017-04-07 16:14:35

已采纳

.cat ul li i{
float: left;
width: 30px;
height:24px;
margin: 3px 3px 0 0;
background: url(sidebar.png);
display: inline;
}
去掉.cat ul ，这是因为优先级的问题。

3 0

街角疯

非常感谢！

2017-04-08 12:55:06

共 3 条回复 >
侠客岛的含笑

2017-04-07 16:15:17

https://segmentfault.com/q/1010000004992134 求采纳

0 0

CSS Sprite雪碧图应用

必学的大型网站实用技术，让你快速掌握CSS Sprite雪碧图技术

47101 学习 · 228 问题

查看课程

相似问题

各位大神，为什么我的图片没有效果？谢谢~

回答 3

为什么第二个雪碧图效果出不来呢？

回答 2

hr为什么没有分割线

回答 1

background-position背景图片定位后，图片为什么出不来效果？

回答 1

是我的代码有问题么？为什么做出来的效果跟老师演示的不一样呀？

回答 1

打开慕课网App查看更多内容