<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>155-定位练习-团购界面</title>
    <style>
        /*
        1. body添加一个盒子；
        2. 设置样式
        2.1 清除默认样式（内外边距）
        2.2 设置div的宽度、高度，水平居中、边框

        */
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 2px solid #ccc;
            /*水平居中*/
            margin: 0 auto;
            /*距离上方100px*/
            margin-top: 100px;
            position: relative;
        }
       /* 3. 添加背后的大图片*/
        div img{
            width: 300px;
            height: 200px;
        }

        /*
        精灵图：设置成某个标签的背景图片，再利用定位属性显示图片*/
        /*4. 添加“热”字*/
        div .hot{
            width: 55px;
            height: 50px;
            background: url("m2.png") no-repeat -1px 3px;
            position: absolute;
            left: 0;
            top: -4px;
        }
        div .price{
            width: 134px;
            height: 42px;
            background: url("m3.png") no-repeat 2px 6px;
            position: absolute;
            left: -8px;
            bottom: 95px ;
        }


    </style>
</head>
<body>

    <div>
        <img src="m1.png" alt="">
        <span class="hot"></span>
        <span class="price" ></span>
        <p>【2店通用】Love Taste爱的味道牛键生活馆双人套餐，提供免费WIFI</p>
    </div>

</body>
</html>