2回答

• 

  慕粉18221508921

  2017-03-16 19:51:05

  已采纳

  用上面的就可以了，我来解释下，

  1，em { }要放在上面，因为他指定了所有em标签的样式;这里逻辑就是，先给所有em设灰色背景，然后指定.top中的em背景为蓝色，而你是，先给.top下的设蓝色背景，然后给所有的em设灰色背景，所以就错了，但是错误没展示出来，因为还错了两个地方：

  2、background-position: x y ; 请看文档：x是水平方向，y是垂直方向，表示背景图片的左上角尖尖相对于对象的位置，可以理解为绝对定位，左上角距离对象x像素，右上角距离对象y像素，这里是0 -16px ;这里要把图片上移16像素，左边不动；

  http://www.w3school.com.cn/cssref/pr_background-position.asp

  3、background-position要写在background后面，或者直接在background里说明清楚，放在上面是不起作用的；如下正确：

  background: url( http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg)no-repeat ;

  background-position:0 0;

  或者：background: url( http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg)  no-repeat  0 -16px;

  也可以，但是：

  background-position:0 -16px;

  background: url( http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg)  no-repeat ;

  不行，因为background里面包含了background-position的设置，你先设置了background-position,又在background里没有设置，不就相当于设置成0 0么，根据就近原则，自然是后面有效，background-position就成0 0了，不过这一点，我刚开始也没看出来，后来想起来了，也是学到了，谢谢你~~

  
  

  
  

  4 2

  慕粉1822... 回复qq_格格_...

  .topList ul设置：margin-top: 0;如果你觉得上面空间还是过宽了，就把margin-top设为负值，出现这种情况的原因是，元素的默认样式，所以一般建议在样式开头写上：* {margin:0;padding:0}，清除默认样式，然后根据实际效果去设置相关元素的padding 和 margin

  2017-03-17 19:53:29

  共 4 条回复 >

• 

  慕粉18221508921

  2017-03-16 19:39:20

  em{

      font-style:normal;

      font-size:12px;

      float:left;

    display:block;

      width:20px;

      height:16px;

      text-align:center;

      color:#333;

     

       background: url( http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg)no-repeat  ;

       background-position:0 -16px ;

       line-height:16px;

  }

  .top em{

      

       background-color:blue;

     display:block;

       width:20px;

      height:16px;

      color:white;

      background: url( http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg)no-repeat ;

       background-position:0 0;

       line-height:16px;

  }

  
  

  0 0