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

编程练习

小伙伴们，请为导航添加鼠标移开效果

效果图:

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

任务

在编辑器的第206行处，使用JS代码，循环设置li标签的鼠标的移入和移开效果

提示：指定li标签onmouseover和onmouseout函数，设置移入时样式为lihover,设置移开时样式为空即可。

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.             background-image: url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
  41.             background-repeat: no-repeat;
  42.             background-position: right;
  43.         }
  44.         .topmenu li a
  45.         {
  46.             text-decoration: none;
  47.             color: #313131;
  48.         }
  49.         .topmenu li a:hover
  50.         {
  51.             text-decoration: underline;
  52.             font-weight: bold;
  53.             color: #e4393c;
  54.         }
  55.         .topmenu .lihover /*鼠标移动到上面时，应用的样式*/
  56.         {
  57.             border: 1px solid #DDD;
  58.             border-right: 0;
  59.             box-shadow: 0 0 8px #DDD;
  60.             -moz-box-shadow: 0 0 8px #DDD;
  61.             -webkit-box-shadow: 0 0 8px #DDD;
  62.             background-image: none;
  63.             height:60px;
  64.             border-left:4px solid #e4393c;
  65.  
  66.  
  67.         }
  68.          .topmenu .lihover .submenu /*悬浮层*/
  69.         {
  70.             display: block;
  71.         }
  72.  
  73.         .topmenu .lihover span /*白色小方框*/
  74.         {
  75.             background: white;
  76.             display: inline-block;
  77.             z-index: 20;
  78.             width: 20px;
  79.             height: 60px;
  80.             float: right;
  81.             position: relative;
  82.         }
  83.  
  84.  
  85.       .topmenu li b
  86.        {
  87.            display:none;
  88.  
  89.         }
  90.  
  91.         .topmenu .lihover b
  92.         {
  93.             display:block;
  94.             height:30px;
  95.             line-height:30px;
  96.             font-weight:normal;
  97.             font-size:10pt;
  98.         }
  99.  
  100.         .submenu
  101.         {
  102.             display: none;
  103.             width: 715px;
  104.             left: 220px;
  105.             position: absolute;
  106.             top: 40px;
  107.             border: 1px solid #DDD;
  108.             z-index: 4;
  109.             background: white;
  110.             box-shadow: 0 0 8px #DDD;
  111.             -moz-box-shadow: 0 0 8px #DDD;
  112.             -webkit-box-shadow: 0 0 8px #DDD;
  113.         }
  114.         .leftdiv
  115.         {
  116.             float: left;
  117.             width: 490px;
  118.             margin: 5px;
  119.         }
  120.         .rightdiv
  121.         {
  122.             float: left;
  123.             width: 200px;
  124.             margin: 5px;
  125.         }
  126.  
  127.         .leftdiv dl
  128.         {
  129.             display: block;
  130.             border-bottom: 1px solid #EEE;
  131.             padding-bottom: 6px;
  132.             overflow: hidden;
  133.         }
  134.         .leftdiv dl dt
  135.         {
  136.             display: block;
  137.             float: left;
  138.             width: 60px;
  139.             text-align: right;
  140.             height: 22px;
  141.             line-height: 22px;
  142.             padding-right: 6px;
  143.         }
  144.  
  145.         .leftdiv dl dt a
  146.         {
  147.             color: #e4393c;
  148.             font-weight: bold;
  149.             text-decoration: underline;
  150.             font-size: 10pt;
  151.         }
  152.         .leftdiv dl dd
  153.         {
  154.             display: block;
  155.             overflow: hidden;
  156.         }
  157.         .leftdiv dl dd a
  158.         {
  159.             display: block;
  160.             float: left;
  161.             border-left: 1px solid #CCC;
  162.             color: #737373;
  163.             font-size: 9pt;
  164.             padding: 0 8px;
  165.             height: 14px;
  166.             line-height: 14px;
  167.             margin: 4px 0;
  168.         }
  169.  
  170.         .rightdiv dl dd
  171.         {
  172.             margin: 3px 0;
  173.         }
  174.  
  175.         .rightdiv dl dt
  176.         {
  177.             color: #e4393c;
  178.             font-weight: bold;
  179.             font-size: 10pt;
  180.         }
  181.  
  182.         .rightdiv dl dd a
  183.         {
  184.             font-size: 9pt;
  185.             color: #737373;
  186.             line-height: 22px;
  187.         }
  188.         .rightdiv dl dd a:hover
  189.         {
  190.             color: #737373;
  191.             font-weight: normal;
  192.         }
  193.  
  194.       .rightPic
  195.       {
  196.           position:relative;
  197.           right:-35px;
  198.           bottom:-30px;
  199.  
  200.           }
  201.     </style>
  202. </head>
  203. <body>
  204.     <script type="text/javascript">
  205.         window.onload = function () {
  206.       // 编写JS代码
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215.         }
  216.     </script>
  217.     <ul class="topmenu">
  218.         <div class="toptitle">
  219.             全部商品分类
  220.         </div>
  221.         <li><a href="#">图书、音像、数字商品</a><span></span> 
  222.             <div class="submenu">
  223.                 <div class="leftdiv">
  224.                     <dl>
  225.                         <dt><a href="#">电子书</a></dt>
  226.                         <dd>
  227.                             <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
  228.                             <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
  229.                         </dd>
  230.                     </dl>
  231.                     <dl>
  232.                         <dt><a href="#">数字音乐</a></dt>
  233.                         <dd>
  234.                             <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
  235.                             <a href="#">乡村民谣</a> <a href="#">有声读物</a>
  236.                         </dd>
  237.                     </dl>
  238.                     <dl>
  239.                         <dt><a href="#">音像</a></dt>
  240.                         <dd>
  241.                             <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
  242.                         </dd>
  243.                     </dl>
  244.                     <dl>
  245.                         <dt><a href="#">文艺</a></dt>
  246.                         <dd>
  247.                             <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
  248.                                 href="#">艺术</a>
  249.                         </dd>
  250.                     </dl>
  251.                     <dl>
  252.                         <dt><a href="#">人文社科</a></dt>
  253.                         <dd>
  254.                             <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
  255.                             <a href="#">哲学/宗教</a> <a href="#">社会科学</a>
  256.                         </dd>
  257.                     </dl>
  258.                     <dl>
  259.                         <dt><a href="#">经管励志</a></dt>
  260.                         <dd>
  261.                             <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
  262.                         </dd>
  263.                     </dl>
  264.                     <dl class="fore7">
  265.                         <dt><a href="#">生活</a></dt>
  266.                         <dd>
  267.                             <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
  268.                             <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
  269.                             <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
  270.                         </dd>
  271.                     </dl>
  272.                     <dl>
  273.                         <dt><a href="#">科技</a></dt>
  274.                         <dd>
  275.                             <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
  276.                                 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
  277.                         </dd>
  278.                     </dl>
  279.                     <dl>
  280.                         <dt><a href="#">少儿</a></dt>
  281.                         <dd>
  282.                             <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
  283.                             <a href="#">11-14岁</a>
  284.                         </dd>
  285.                     </dl>
  286.                     <dl>
  287.                         <dt><a href="#">教育</a></dt>
  288.                         <dd>
  289.                             <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
  290.                         </dd>
  291.                     </dl>
  292.                     <dl>
  293.                         <dt><a href="#">其它</a></dt>
  294.                         <dd>
  295.                             <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
  296.                             <a href="#">杂志/期刊</a>
  297.                         </dd>
  298.                     </dl>
  299.                 </div>
  300.                 <div class="rightdiv">
  301.                     <dl>
  302.                         <dd>
  303.                             <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
  304.                                 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
  305.                                     width="194" height="70" title="\家电">
  306.                             </a>
  307.                         </dd>
  308.                         <dd>
  309.                             <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
  310.                                 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
  311.                                     width="194" height="70" title="小家电--三请聚宝盆">
  312.                             </a>
  313.                         </dd>
  314.                     </dl>
  315.                     <dl>
  316.                         <dt>推荐品牌</dt>
  317.                         <dd>
  318.                             <a href="#">美的官方旗舰店</a>
  319.                         </dd>
  320.                         <dd>
  321.                             <a href="#">苏泊尔旗舰店</a>
  322.                         </dd>
  323.                         <dd>
  324.                             <a href="#">九阳旗舰店</a>
  325.                         </dd>
  326.                         <dd>
  327.                             <a href="#">东菱旗舰店</a>
  328.                         </dd>
  329.                         <dd>
  330.                             <a href="#">海尔统帅旗舰店</a>
  331.                         </dd>
  332.                         <dd>
  333.                             <a href="#">小熊旗舰店</a>
  334.                         </dd>
  335.                     </dl>
  336.                     <img src="wii.png" class="rightPic" />
  337.                 </div>
  338.             </div>
  339.         </li>
  340. <li><a href="#">家用电器</a></li>
  341.         <li><a href="#">手机、数码</a></li>
  342.         <li><a href="#">电脑、办公</a></li>
  343.         <li><a href="#">家居、家具、家装、厨具</a></li>
  344.         <li><a href="#">服饰内衣、珠宝首饰</a></li>
  345.         <li><a href="#">个护化妆</a></li>
  346.         <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
  347.         <li><a href="#">运动户外</a></li>
  348.         <li><a href="#">汽车用品</a></li>
  349.         <li><a href="#">母婴、玩具乐器</a></li>
  350.         <li><a href="#">食品饮料、酒类、生鲜</a></li>
  351.         <li><a href="#">营养保健</a></li>
  352.     </ul>
  353. </body>
  354. </html>
下一节