论坛

标题: background-position 没效果 [打印本页]
作者: xiaofufu    时间: 2016-12-6 14:31
标题: background-position 没效果
background-position 昨天练习的没有问题， 今天background-position 没效果、[attach]75283[/attach]
  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;}

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

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

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

  31. .her .nav li:hover i{background-color:#fff; background-position:left 0;}
  32. </style>
  33. </head>

  35. <body>

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

  105. </body>
  106. </html>
复制代码



作者: 韩文强    时间: 2016-12-6 20:07
看着效果没问题啊，把问题说明清楚了，再发问题的时候把你写的代码打成压缩包上传上来。
作者: xiaofufu    时间: 2016-12-7 09:31
韩文强 发表于 2016-12-6 20:07
看着效果没问题啊，把问题说明清楚了，再发问题的时候把你写的代码打成压缩包上传上来。 ...

鼠标没移入图片应该显示的是白色的图片啊。 移入后才是灰色的。 代码以后会打压缩包上传的，



欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1