实战题，手风琴效果教程-慕课网

2-3 实战题

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

实战题

学习完《用HTML实现手风琴效果页面结构》课程后，完成本次实战练习，快来检验你的实战成果吧！

任务

请在右侧编辑器第15行补全代码，让代码实现如下图所示的布局显示效果！

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

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</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">？</p>
                </div>
                <s class="line"></s>
                <i class="mask"></i>
            </a>
        </li>
 
    </ul>
    </div>
</body>
</html>