问答详情
源自：3-4 编程练习

我哪里错了呢？显示的时候全部是小衣服，其他的图标都不出现

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


提问者：karawoo 2015-10-27 17:05

个回答

  • karawoo
    2015-10-28 11:47:27

    我已经解决了谢谢!


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


    0