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

编程练习

小伙伴们，根据所学知识，请为导航菜单大类设置右箭头

效果图:

图片素材:

图片引用地址:http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能。

任务

1. 为每个大类的CSS样式设置背景：

提示：设置1.png为背景，靠右，且不重复。

2. 当鼠标移到大类时，设置背景为空。

提示：设置hover 时背景为空。

index.html 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.        body
  7.         {
  8.             padding: 0;
  9.             font-size: 10pt;
  10.             behavior:url(css/csshover.htc);
  11.         }
  12.         .topmenu
  13.         {
  14.             display: block;
  15.             width: 220px;
  16.             border: 2px solid #e4393c;
  17.             margin: 0;
  18.             padding: 0;
  19.         }
  20.         .toptitle
  21.         {
  22.             height: 40px;
  23.             line-height: 40px;
  24.             text-align: left;
  25.             font-size: 11pt;
  26.             font-weight: bold;
  27.             color: White;
  28.             background: #e4393c;
  29.             padding-left: 20px;
  30.         }
  31.         .topmenu li
  32.         {
  33.             height: 30px;
  34.             line-height: 30px;
  35.             font-size: 11pt;
  36.             list-style-type: none;
  37.             text-align: left;
  38.             padding-left: 8px;
  39.             z-index: 3;
  40.  
  41.         /* 任务一 */
  42.  
  43.         }
  44.  
  45. 		.topmenu li:hover
  46.         {
  47.  
  48.         /* 任务二 */ 
  49.  
  50.         }
  51.  
  52.         .topmenu li a
  53.         {
  54.             text-decoration: none;
  55.             color: #313131;
  56.         }
  57.         .topmenu li a:hover
  58.         {
  59.             text-decoration: underline;
  60.             font-weight: bold;
  61.             color: #e4393c;
  62.         }
  63.  
  64.  
  65.  
  66.     </style>
  67. </head>
  68. <body>
  69.  
  70.     <ul class="topmenu">
  71.         <div class="toptitle">
  72.             全部商品分类
  73.         </div>
  74.         <li><a href="#">图书、音像、数字商品</a><span></span>  </li>
  75. <li><a href="#">家用电器</a></li>
  76.         <li><a href="#">手机、数码</a></li>
  77.         <li><a href="#">电脑、办公</a></li>
  78.         <li><a href="#">家居、家具、家装、厨具</a></li>
  79.         <li><a href="#">服饰内衣、珠宝首饰</a></li>
  80.         <li><a href="#">个护化妆</a></li>
  81.         <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
  82.         <li><a href="#">运动户外</a></li>
  83.         <li><a href="#">汽车用品</a></li>
  84.         <li><a href="#">母婴、玩具乐器</a></li>
  85.         <li><a href="#">食品饮料、酒类、生鲜</a></li>
  86.         <li><a href="#">营养保健</a></li>
  87.     </ul>
  88. </body>
  89. </html>
下一节