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

实战题

学习完《用CSS实现手风琴效果页面样式》及《用CSS设置图片明暗度的变化》视频课程后，完成本次实战练习，快来检验你的实战成果吧！本模块代码的最终实现效果如下图所示：

任务

任务1：请在右侧CSS编辑器第17行补全代码，实现图片缩小时显示图片局部

任务2：请在右侧CSS编辑器第30行补全代码，实现遮罩层悬停时显示阴影效果

 

温馨提示：完成的任务要与要求的代码效果相一致才可以通过本次测试，否则就再看一遍视频哦！

 

index.htmlstyle.css 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  7. <body>
  8.     <div id="subject" class="wrapper">
  9.     <ul>
  10.         <li class="big">
  11.             <a href="#link1">
  12.                 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
  13.                 <div class="info">
  14.                 <h3 style="color:#f62368">聚美妆</h3>
  15.                 <p>聚美妆1/2周年庆</p>
  16.                 <p class="price"><strong>1</strong><i>折起</i></p>
  17.                 </div>
  18.                 <s class="line"></s>
  19.                 <i class="mask"></i>
  20.             </a>
  21.         </li>
  22.      <li>
  23.             <a href="#link1">
  24.                 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
  25.                 <div class="info">
  26.                 <h3 style="color:#f62368">聚美妆</h3>
  27.                 <p>聚美妆1/2周年庆</p>
  28.                 <p class="price"><strong>1</strong><i>折起</i></p>
  29.                 </div>
  30.                 <s class="line"></s>
  31.                 <i class="mask"></i>
  32.             </a>
  33.         </li>
  34.         <li>
  35.             <a href="#link1">
  36.                 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
  37.                 <div class="info">
  38.                 <h3 style="color:#f62368">聚美妆</h3>
  39.                 <p>聚美妆1/2周年庆</p>
  40.                 <p class="price"><strong>1</strong><i>折起</i></p>
  41.                 </div>
  42.                 <s class="line"></s>
  43.                 <i class="mask"></i>
  44.             </a>
  45.         </li>
  46.         <li>
  47.             <a href="#link1">
  48.                 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
  49.                 <div class="info">
  50.                 <h3 style="color:#f62368">聚美妆</h3>
  51.                 <p>聚美妆1/2周年庆</p>
  52.                 <p class="price"><strong>1</strong><i>折起</i></p>
  53.                 </div>
  54.                 <s class="line"></s>
  55.                 <i class="mask"></i>
  56.             </a>
  57.         </li>
  58.         <li>
  59.             <a href="#link1">
  60.                 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
  61.                 <div class="info">
  62.                 <h3 style="color:#f62368">聚美妆</h3>
  63.                 <p>聚美妆1/2周年庆</p>
  64.                 <p class="price"><strong>1</strong><i>折起</i></p>
  65.                 </div>
  66.                 <s class="line"></s>
  67.                 <i class="mask"></i>
  68.             </a>
  69.         </li>
  70.     </ul>
  71.     </div>
  72. </body>
  73. </html>
  1. body,ul,li,p,h3 {margin: 0;padding: 0}
  2. ul,ol {list-style: none;}
  3.  
  4. /*外框*/
  5. .wrapper{ height:128px; border:1px solid #d3d3d3;}
  6.  
  7. /*动画效果*/
  8. .wrapper ul *{ transition:all .1s linear;}
  9.  
  10.  
  11. .wrapper li{ width:156px; height:128px; float:left; overflow:hidden;}
  12. .wrapper li a{ width:156px; height:128px; display:block; position:relative; cursor:pointer; text-decoration:none; overflow:hidden;}
  13.  
  14. /*当前列表项悬停遮罩层消失*/
  15. .wrapper li a:hover .mask{ opacity:0;}
  16.  
  17. .wrapper li img{ height:72px; width:117px; position:absolute; bottom:0; ？;}
  18. .wrapper li .line{ height:128px; width:0; font-size:0; border-right:1px dashed #cacaca; position:absolute; right:0; top:4px;}
  19. .wrapper li .info{ position:absolute; top:0; left:0; width:136px; padding:4px 10px;}
  20. .wrapper li .info h3{ font-size:14px; font-weight:700;}
  21. .wrapper li .info p{ color:#868686; font-size:12px; overflow:hidden; width:136px; height:22px; line-height:22px;}
  22. .wrapper li .info p.price{ font-size:14px; font-style:italic; color:#fa2a5d; height:35px;}
  23. .wrapper li .info p.price strong{ font-size:22px; font-family:Arial; padding-right:2px;}
  24. .wrapper li .info p.price i{ font-size:14px}
  25.  
  26. /*遮罩层的样式*/
  27. .wrapper .mask{ height:128px; width:156px; display:block; position:absolute; top:0; left:0; background:#000;opacity:0;}
  28.  
  29. /*遮罩层悬停时显示阴影*/
  30. .wrapper:hover .mask{？;}
  31.  
  32. /*展开状态*/
  33. .wrapper .big, .wrapper .big a { width:314px}
  34. .wrapper .big img{ width:195px; height:120px; right:0; bottom:0;}
  35. .wrapper .big .info{ width:294px;}
  36. .wrapper .big .info h3{ font-size:18px;}
  37. .wrapper .big .info p{ font-size:14px; width:166px;}
  38. .wrapper .big .info p.price{ font-size:16px; padding-top:7px;}
  39. .wrapper .big .info p.price strong{ font-size:28px;}
  40. .wrapper .big .info p.price i{ font-size:16px;}
  41. .wrapper .big .mask{ width:314px;}
  42. .wrapper li.big a:hover .mask{ opacity:0;}
下一节