设置background-position无效啊 各位帮我看看

来源:3-3 CSS Sprite 应用

pal3gbgb

2015-06-26 10:41

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>demo</title>

<style>

      h3 , ul{

       margin: 0px;

       padding: 0px;

      }

      ul {

       list-style: none;

      }

      li h3 {

       font-size: 14px;

       font-weight: 400;

      }

      li {

       display: block;

       height: 31px;

       line-height: 31px;

       overflow: hidden;

       border-bottom: 1px solid #dedede;

      }

      li i {

       background:url(sidebar.png);

       display: inline;

       width: 30px;

       height: 24px;

       float: left;

       margin: 3px 10px 0 0;

      }

      .cat {

       width: 150px;

       background:#f8f8f8;

       border: 1px solid #bbb;

      }

      .cat-1 i{

       background-position: 0 0;

      }

      .cat-2 i{

       background-position: 0 -24;

      }

      .cat-3 i{

       background-position: 0 -48;

      }

      .cat-4 i{

       background-position: 0 -72;

      }

      .cat-5 i{

       background-position: 0 -96;

      }

      .cat-6 i{

       background-position: 0 -120;

      }

      .cat-7 i{

       background-position: 0 -144;

      }

      .cat-8 i{

       background-position: 0 -168;

      }

</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>

http://img.mukewang.com/558cbb6e0001c8d404150314.jpghttp://img.mukewang.com/558cbbb100014c1502140283.jpg各位帮我看看哪里错了 

写回答 关注

2回答

  • Keyro
    2015-06-26 16:49:07

    没写单位

    pal3gb...

    哈哈 忽略了 谢谢了

    2015-06-26 22:24:03

    共 1 条回复 >

  • xiaoxiaojin
    2015-06-26 11:26:22

    background-position:0 24px;

    慕娘5736... 回复pal3gb...

    是什么格式的问题?

    2015-10-11 20:58:29

    共 3 条回复 >

CSS Sprite雪碧图应用

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

47101 学习 · 228 问题

查看课程

相似问题