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

编程练习

小伙伴们，请为悬浮层中的明细菜单A标签间插入分隔竖线。

效果图:

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

任务

在编辑器第137行处，定义超级链接为块显示，左浮动，及左边框线。

提示：使用CSS样式定义超级链接为block块显示，左浮动，及左边框线即可。

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 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.             /* 在此插入CSS样式 */
  138.             color: #737373;
  139.             font-size: 9pt;
  140.             padding: 0 8px;
  141.             height: 14px;
  142.             line-height: 14px;
  143.             margin: 4px 0;
  144.         }
  145.  
  146.         .rightdiv dl dd
  147.         {
  148.             margin: 3px 0;
  149.         }
  150.  
  151.         .rightdiv dl dt
  152.         {
  153.             color: #e4393c;
  154.             font-weight: bold;
  155.             font-size: 10pt;
  156.         }
  157.  
  158.         .rightdiv dl dd a
  159.         {
  160.             font-size: 9pt;
  161.             color: #737373;
  162.             line-height: 22px;
  163.         }
  164.         .rightdiv dl dd a:hover
  165.         {
  166.             color: #737373;
  167.             font-weight: normal;
  168.         }
  169.  
  170.     </style>
  171. </head>
  172. <body>
  173.  
  174.     <ul class="topmenu">
  175.         <div class="toptitle">
  176.             全部商品分类
  177.         </div>
  178.         <li><a href="#">图书、音像、数字商品</a><span></span> 
  179.             <div class="submenu">
  180.                 <div class="leftdiv">
  181.                     <dl>
  182.                         <dt><a href="#">电子书</a></dt>
  183.                         <dd>
  184.                             <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
  185.                             <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
  186.                         </dd>
  187.                     </dl>
  188.                     <dl>
  189.                         <dt><a href="#">数字音乐</a></dt>
  190.                         <dd>
  191.                             <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
  192.                             <a href="#">乡村民谣</a> <a href="#">有声读物</a>
  193.                         </dd>
  194.                     </dl>
  195.                     <dl>
  196.                         <dt><a href="#">音像</a></dt>
  197.                         <dd>
  198.                             <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
  199.                         </dd>
  200.                     </dl>
  201.                     <dl>
  202.                         <dt><a href="#">文艺</a></dt>
  203.                         <dd>
  204.                             <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
  205.                                 href="#">艺术</a>
  206.                         </dd>
  207.                     </dl>
  208.                     <dl>
  209.                         <dt><a href="#">人文社科</a></dt>
  210.                         <dd>
  211.                             <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
  212.                             <a href="#">哲学/宗教</a> <a href="#">社会科学</a>
  213.                         </dd>
  214.                     </dl>
  215.                     <dl>
  216.                         <dt><a href="#">经管励志</a></dt>
  217.                         <dd>
  218.                             <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
  219.                         </dd>
  220.                     </dl>
  221.                     <dl class="fore7">
  222.                         <dt><a href="#">生活</a></dt>
  223.                         <dd>
  224.                             <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
  225.                             <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
  226.                             <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
  227.                         </dd>
  228.                     </dl>
  229.                     <dl>
  230.                         <dt><a href="#">科技</a></dt>
  231.                         <dd>
  232.                             <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
  233.                                 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
  234.                         </dd>
  235.                     </dl>
  236.                     <dl>
  237.                         <dt><a href="#">少儿</a></dt>
  238.                         <dd>
  239.                             <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
  240.                             <a href="#">11-14岁</a>
  241.                         </dd>
  242.                     </dl>
  243.                     <dl>
  244.                         <dt><a href="#">教育</a></dt>
  245.                         <dd>
  246.                             <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
  247.                         </dd>
  248.                     </dl>
  249.                     <dl>
  250.                         <dt><a href="#">其它</a></dt>
  251.                         <dd>
  252.                             <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
  253.                             <a href="#">杂志/期刊</a>
  254.                         </dd>
  255.                     </dl>
  256.                 </div>
  257.                 <div class="rightdiv">
  258.                     <dl>
  259.                         <dd>
  260.                             <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
  261.                                 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
  262.                                     width="194" height="70" title="\家电">
  263.                             </a>
  264.                         </dd>
  265.                         <dd>
  266.                             <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
  267.                                 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
  268.                                     width="194" height="70" title="小家电--三请聚宝盆">
  269.                             </a>
  270.                         </dd>
  271.                     </dl>
  272.                     <dl>
  273.                         <dt>推荐品牌</dt>
  274.                         <dd>
  275.                             <a href="#">美的官方旗舰店</a>
  276.                         </dd>
  277.                         <dd>
  278.                             <a href="#">苏泊尔旗舰店</a>
  279.                         </dd>
  280.                         <dd>
  281.                             <a href="#">九阳旗舰店</a>
  282.                         </dd>
  283.                         <dd>
  284.                             <a href="#">东菱旗舰店</a>
  285.                         </dd>
  286.                         <dd>
  287.                             <a href="#">海尔统帅旗舰店</a>
  288.                         </dd>
  289.                         <dd>
  290.                             <a href="#">小熊旗舰店</a>
  291.                         </dd>
  292.                     </dl>
  293.                     <img src="wii.png" class="rightPic" />
  294.                 </div>
  295.             </div>
  296.         </li>
  297. <li><a href="#">家用电器</a></li>
  298.         <li><a href="#">手机、数码</a></li>
  299.         <li><a href="#">电脑、办公</a></li>
  300.         <li><a href="#">家居、家具、家装、厨具</a></li>
  301.         <li><a href="#">服饰内衣、珠宝首饰</a></li>
  302.         <li><a href="#">个护化妆</a></li>
  303.         <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
  304.         <li><a href="#">运动户外</a></li>
  305.         <li><a href="#">汽车用品</a></li>
  306.         <li><a href="#">母婴、玩具乐器</a></li>
  307.         <li><a href="#">食品饮料、酒类、生鲜</a></li>
  308.         <li><a href="#">营养保健</a></li>
  309.     </ul>
  310. </body>
  311. </html>
下一节