问答详情
源自：3-3 CSS Sprite 应用

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css sprite</title>

<style type="text/css">

ul{list-style: none;}

h3, ul{margin: 0;padding: 0;}

li h3{font-size: 14px;font-weight: 400}

li{display: block;

height: 31px;

line-height: 31px;

overflow: hidden;

border-bottom: 1px solid #46EAC1;}

.cat{width: 150px;background: #57A3D8;border: #695785;}

li i{background: url(sidebar.png);display: inline;width: 30px;height: 24px;float: left;margin: 5px 0px 0px;}

.cat-1{background-position: 0 0;}

.cat-2{background-position: 0 -24px;}

.cat-3{background-position: 0 -48px;}

.cat-4{background-position: 0 -72px;}

.cat-5{background-position: 0 -96px;}

.cat-6{background-position: 0 -120px;}

.cat-7{background-position: 0 -144px;}

.cat-8{background-position: 0 -168px;}

</style>

</head>

<body>

<div>

<ul>

<li>

<i></i>

<h3>

服装内衣

</h3>


</li>

<li>

<i></i>

<h3>

运动户外

</h3>


</li>

<li>

<i></i>

<h3>

珠宝手表

</h3>


</li>

<li>

<i></i>

<h3>

手机数码

</h3>


</li>

<li>

<i></i>

<h3>

办公家电

</h3>


</li>

<li>

<i></i>

<h3>

护肤彩妆

</h3>


</li>

<li>

<i></i>

<h3>

母婴

</h3>


</li>

<li>

<i></i>

<h3>

鞋包配饰

</h3>


</li>



</ul>

</div>

</body>

</html>


提问者：weibo_会画画的椰子_0 2015-07-20 16:28

个回答

  • 浅水了
    2015-07-20 17:18:40
    已采纳 

    图片路径不对


    1
  • weibo_会画画的椰子_0
    2015-07-21 10:24:00

    我知道了，是

      .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;}

    我没在cat-1 后面加i标签

    0
  • 浅水了
    2015-07-20 22:10:52

    background: url(sidebar.png)   url()  括号里面是放图片的。你应该是按视频敲的代码吧。3-4编程练习里有图片链接http://img.mukewang.com/539a950e00015ba500710200.jpg


    0