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

编程练习

小伙伴们，为京东商城导航二级菜单添加一个wii.png的图片到右下角，要求浮动出界面。

效果图:

图片素材:

图片引用地址:http://img1.sycdn.imooc.com//541120c80001aae401970164.jpg

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

任务

1. 在代码编辑器第305行处，插入wii.png图片，并为其设置样式：rightPic

提示:使用<img>标签

2. 在代码编辑器第173行处，在rightPic中设置图片位置

提示：相对父元素定位，right及bottom属性为负值

 

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