快捷导航
发新帖
返回列表
2 1016
电梯直达  跳转到指定楼层

[提问] background-position 没效果

xiaofufu|注册会员 |勤币 202 |学币 0
发表于 2016-12-6 14:31 | 复制链接 | 打印 | 上一主题 | 下一主题
background-position 昨天练习的没有问题, 今天background-position 没效果、
  1.         <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. *{ padding:0; margin:0;}
  8. ul,ol{ list-style:none}
  9. a{ text-decoration:none;}

  10. body{ font-family:"黑体", "微软雅黑", "宋体"}

  11. .her{ width:100%; height:120px; background:rgb(129,129,129); margin-top:100px;}
  12. .her .nav{ width:1200px; height:120px; border:1px solid red; margin:0 auto;}
  13. .her .nav li{ float:left; width:120px; text-align:center; margin:10px 0;  }
  14. .her .nav li a{ width:120px; height:105px; display:block;}
  15. .her .nav i{display:block;  width:60px; height:60px;border-radius:50%; margin:0 auto; background-position:left -60px;}
  16. .her .nav span{  padding-top:10px; display:block; font-size:14px; color:#fff;}

  17. .her .nav li .jlsj{background:url(imges/jlsj.png)}
  18. .her .nav li .ppcx{background:url(imges/ppcx.png)}
  19. .her .nav li .acdg{background:url(imges/acdg.png)}
  20. .her .nav li .gfsc{background:url(imges/gfsc.png)}
  21. .her .nav li .gafw{background:url(imges/gafw.png)}
  22. .her .nav li .kjcx{background:url(imges/kjcx.png)}
  23. .her .nav li .rlzy{background:url(imges/rlzy.png)}
  24. .her .nav li .zxdt{background:url(imges/zxdt.png)}
  25. .her .nav li .cysq{background:url(imges/cysq.png)}
  26. .her .nav li .zsjm{background:url(imges/zsjm.png)}

  27. .her .nav li:hover i{background-color:#fff; background-position:left 0;}
  28. </style>
  29. </head>

  30. <body>

  31. <div class="her">
  32. <div class="nav">
  33. <ul>
  34.         <li>
  35.     <a href="#">
  36.     <i class=" jlsj"></i>
  37.     <span>吉利世界</span>
  38.     </a>
  39.     </li>
  40.     <li>
  41.     <a href="#">
  42.     <i class=" ppcx"></i>
  43.     <span>品牌车型</span>
  44.     </a>
  45.     </li>
  46.     <li>
  47.     <a href="#">
  48.     <i class="acdg"></i>
  49.     <span>爱车导购</span>
  50.     </a>
  51.     </li>
  52.     <li>
  53.     <a href="#">
  54.     <i class="gfsc"></i>
  55.     <span>官方商城        </span>
  56.     </a>
  57.     </li>
  58.     <li>
  59.     <a href="#">
  60.     <i class="gafw"></i>
  61.     <span>关爱服务</span>
  62.     </a>
  63.     </li>
  64.     <li>
  65.     <a href="#">
  66.     <i class="kjcx"></i>
  67.     <span>科技创新</span>
  68.     </a>
  69.     </li>
  70.     <li>
  71.     <a href="#">
  72.     <i class="rlzy"></i>
  73.     <span>人力资源</span>
  74.     </a>
  75.     </li>
  76.     <li>
  77.     <a href="#">
  78.     <i class="zxdt"></i>
  79.     <span>资讯动态</span>
  80.     </a>
  81.     </li>
  82.     <li>
  83.     <a href="#">
  84.     <i class="cysq"></i>
  85.     <span>车友社区</span>
  86.     </a>
  87.     </li>
  88.     <li>
  89.     <a href="#">
  90.     <i class="zsjm"></i>
  91.     <span>招商加盟</span>
  92.     </a>
  93.     </li>
  94.         
  95. </ul>
  96. </div>
  97. </div>

  98. </body>
  99. </html>
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
举报 使用道具
| 回复

共2个回复 最后回复于 2016-12-7 09:31

勤币 77   学币 0  
沙发
发表于 2016-12-6 20:07:56 | 只看该作者
看着效果没问题啊,把问题说明清楚了,再发问题的时候把你写的代码打成压缩包上传上来。
举报 使用道具
勤币 202   学币 0  
板凳
发表于 2016-12-7 09:31:26 | 只看该作者
韩文强 发表于 2016-12-6 20:07
看着效果没问题啊,把问题说明清楚了,再发问题的时候把你写的代码打成压缩包上传上来。 ...

鼠标没移入图片应该显示的是白色的图片啊。 移入后才是灰色的。 代码以后会打压缩包上传的,
举报 使用道具
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表