3-4 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，请在上一编程练习题的基本上，完成立css sprit雪碧图的使用。

效果图:

雪碧图素材:

http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg

注意:该图片的引用，请使用提供的链接。

 

任务

一、完成列表的结构后开始为列表中li i添加雪碧图样式

提示:
  1.首先为li添加不同的class，因为他们的background position值是不同的
  2.根据li上添加的class，书写响应的样式
  3.注意position的值为负数，因为雪碧图使用的坐标系是第四象限

说明: 第 55 行代码注释。

index.html 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
  4. <style>
  5.  
  6. 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{
  7. margin: 0;
  8. padding: 0;
  9. }
  10. h3 {
  11.     display: block;
  12. 	margin: 0;
  13. 	padding: 0;
  14. }
  15.  
  16.  
  17. .cat {
  18.     position: relative;
  19.     width: 150px;
  20. 	background: #f8f8f8;
  21. 	 border: 1px solid #bbb;
  22. }
  23.  
  24. ol, ul {
  25. 	list-style: none;
  26. }
  27.  
  28. li {
  29.     z-index: 2;
  30.     position: relative;
  31.     display: block;
  32.     height: 31px;
  33.     line-height: 31px;
  34.     overflow: hidden;
  35.     margin: 1px 10px 0;
  36.     vertical-align: bottom;
  37.     border-bottom: 1px solid #dedede
  38. }
  39.  
  40. li h3 {
  41.     font-size: 14px;
  42.     font-weight: 400;
  43. }
  44.  
  45. li i {
  46.     display: inline;
  47.     float: left;
  48.     margin: 3px 10px 0 0;
  49.     height: 24px;
  50.     width: 30px
  51. }
  52.  
  53.   /* 在这里补充雪碧图的样式 */
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64. </style>
  65. </head>
  66. <body>
  67.   <div class="cat">
  68.       <ul >
  69.         <li>
  70.           <i></i>
  71.           <h3>服装内衣</h3>
  72.         </li>
  73.         <li class="cat-2">
  74.           <i></i>
  75.           <h3>鞋包配饰</h3>
  76.         </li>
  77.         <li>
  78.           <i></i>
  79.           <h3>运动户外</h3>
  80.         </li>
  81.         <li>
  82.           <i></i>
  83.           <h3>珠宝手表</h3>
  84.  
  85.         </li>
  86.         <li>
  87.           <i></i>
  88.           <h3>手机数码</h3>
  89.         </li>
  90.         <li>
  91.           <i></i>
  92.           <h3>家电办公</h3>
  93.         </li>
  94.         <li>
  95.           <i></i>
  96.           <h3>护肤彩妆</h3>
  97.         </li>
  98.         <li >
  99.           <i></i>
  100.           <h3>母婴用品</h3>
  101.         </li>
  102.       </ul>
  103.   </div>
  104. </body>
  105. </html>
下一节