课程

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

请教下我的背景图片定位后效果出不来？

来源：3-3 CSS Sprite 应用

逐梦凡

2015-07-05 11:34

http://img.mukewang.com/5598a5ba0001f5f901680312.jpg

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

   *{margin: 0;padding: 0;}

ul{list-style-type: none;}

h3{font-size: 14px;

  font-weight: 400;

  }

li{display: block;

  height: 31px;

  line-height: 31px;

  overflow: hidden;

  border-bottom: 1px solid #dedede;

  margin: 3px 10px 0 0;

  }

.cat{width: 150px;

    background: #f8f8f8;

    border: 1px solid #ddd;

    }

i{background: url(img/sidebar.png);

 display:inline;

 width: 34px;

 height: 24px;

 float: left;}

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


写回答 关注

1回答

  • Tin__man
    2015-07-06 12:24:41
    已采纳

    <li class="=cat-1">

    只是这里多了个=

    敲标识符的时候要注意点

    1 0

    逐梦凡

    谢谢！嘿嘿！

    2015-07-06 13:39:23

    共 1 条回复 >

CSS Sprite雪碧图应用

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

47101 学习 · 228 问题

查看课程

相似问题

background-position背景图片定位后，图片为什么出不来效果？

回答 1

关于背景图片插入

回答 4

雪碧图效果出不来

回答 3

为什么不在.cat-2-8后面加i 就不能出现特定的背景图呢，都是第一个服装内衣的背景？

回答 1

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

回答 3

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