實(shí)戰(zhàn)題
學(xué)習(xí)完《用CSS實(shí)現(xiàn)手風(fēng)琴效果頁面樣式》及《用CSS設(shè)置圖片明暗度的變化》視頻課程后，完成本次實(shí)戰(zhàn)練習(xí)，快來檢驗(yàn)?zāi)愕膶?shí)戰(zhàn)成果吧！本模塊代碼的最終實(shí)現(xiàn)效果如下圖所示：
任務(wù)
任務(wù)1：請(qǐng)?jiān)谟覀?cè)CSS編輯器第17行補(bǔ)全代碼，實(shí)現(xiàn)圖片縮小時(shí)顯示圖片局部
任務(wù)2：請(qǐng)?jiān)谟覀?cè)CSS編輯器第30行補(bǔ)全代碼，實(shí)現(xiàn)遮罩層懸停時(shí)顯示陰影效果
溫馨提示：完成的任務(wù)要與要求的代碼效果相一致才可以通過本次測試，否則就再看一遍視頻哦！
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="subject" class="wrapper">
<ul>
<li class="big">
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妝</h3>
<p>聚美妝1/2周年慶</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妝</h3>
<p>聚美妝1/2周年慶</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妝</h3>
<p>聚美妝1/2周年慶</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妝</h3>
<p>聚美妝1/2周年慶</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妝</h3>
<p>聚美妝1/2周年慶</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
</ul>
</div>
</body>
</html>
body,ul,li,p,h3 {margin: 0;padding: 0}
ul,ol {list-style: none;}
/*外框*/
.wrapper{ height:128px; border:1px solid #d3d3d3;}
/*動(dòng)畫效果*/
.wrapper ul *{ transition:all .1s linear;}
.wrapper li{ width:156px; height:128px; float:left; overflow:hidden;}
.wrapper li a{ width:156px; height:128px; display:block; position:relative; cursor:pointer; text-decoration:none; overflow:hidden;}
/*當(dāng)前列表項(xiàng)懸停遮罩層消失*/
.wrapper li a:hover .mask{ opacity:0;}
.wrapper li img{ height:72px; width:117px; position:absolute; bottom:0; ？;}
.wrapper li .line{ height:128px; width:0; font-size:0; border-right:1px dashed #cacaca; position:absolute; right:0; top:4px;}
.wrapper li .info{ position:absolute; top:0; left:0; width:136px; padding:4px 10px;}
.wrapper li .info h3{ font-size:14px; font-weight:700;}
.wrapper li .info p{ color:#868686; font-size:12px; overflow:hidden; width:136px; height:22px; line-height:22px;}
.wrapper li .info p.price{ font-size:14px; font-style:italic; color:#fa2a5d; height:35px;}
.wrapper li .info p.price strong{ font-size:22px; font-family:Arial; padding-right:2px;}
.wrapper li .info p.price i{ font-size:14px}
/*遮罩層的樣式*/
.wrapper .mask{ height:128px; width:156px; display:block; position:absolute; top:0; left:0; background:#000;opacity:0;}
/*遮罩層懸停時(shí)顯示陰影*/
.wrapper:hover .mask{？;}
/*展開狀態(tài)*/
.wrapper .big, .wrapper .big a { width:314px}
.wrapper .big img{ width:195px; height:120px; right:0; bottom:0;}
.wrapper .big .info{ width:294px;}
.wrapper .big .info h3{ font-size:18px;}
.wrapper .big .info p{ font-size:14px; width:166px;}
.wrapper .big .info p.price{ font-size:16px; padding-top:7px;}
.wrapper .big .info p.price strong{ font-size:28px;}
.wrapper .big .info p.price i{ font-size:16px;}
.wrapper .big .mask{ width:314px;}
.wrapper li.big a:hover .mask{ opacity:0;}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
