课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

雪碧图不显示

来源：3-4 编程练习

weibo_任_无忧_0

2015-11-26 12:19

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>

<style>


blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{

margin: 0;

padding: 0;

}

h3 {

    display: block;

margin: 0;

padding: 0;

}



.cat {

    position: relative;

    width: 150px;

background: #f8f8f8;

border: 1px solid #bbb;

}


ol, ul {

list-style: none;

}


li {

    z-index: 2;

    position: relative;

    display: block;

    height: 31px;

    line-height: 31px;

    overflow: hidden;

    margin: 1px 10px 0;

    vertical-align: bottom;

    border-bottom: 1px solid #dedede

}


li h3 {

    font-size: 14px;

    font-weight: 400;

}


li i {

    display: inline;

    float: left;

    margin: 3px 10px 0 0;

    height: 24px;

    width: 30px

    background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg);

}


  /* 在这里补充雪碧图的样式 */

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


写回答 关注

3回答

  • 李晓健
    2015-11-26 12:40:43
    已采纳 
    li i {
    display: inline;
    float: left;
    margin: 3px 10px 0 0;
    height: 24px;
    width: 30px;  /**这里少了分号**/
    background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
}

    上面一个不对，因为有float 所以 display: inline; 就没什么用了。

    2 0

    李晓健 回复weibo_...

    去查一下CSS中BFC的相关知识

    2015-11-26 20:45:31

    共 2 条回复 >

  • echo_kinchao
    2015-11-26 13:46:00

    浮动的影响

    0 0
  • 李晓健
    2015-11-26 12:38:05
    li i {
    display: inline;  /**这里的inline改成 inline-block 试试**/
    float: left;
    margin: 3px 10px 0 0;
    height: 24px;
    width: 30px
    background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
}


    0 0

CSS Sprite雪碧图应用

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

47101 学习 · 228 问题

查看课程

相似问题

关于雪碧图

回答 1

刷不出雪碧图啊

回答 2

为什么雪碧图没有显示出来呢？？

回答 2

雪碧图效果出不来

回答 3

css sprite 雪碧图应用

回答 2

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