html +CSS 简单团购界面设计

最新推荐文章于 2024-07-30 16:49:30 发布

老张谋

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量8k

点赞数 18

分类专栏：前端技术文章标签： HTML CSS 团购界面 web 前端

本文链接：https://blog.csdn.net/wgf5845201314/article/details/88026821

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

<!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>

老张谋

关注

18
点赞
踩
71

收藏

觉得还不错? 一键收藏
3
评论
html +CSS 简单团购界面设计

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;155-定位练习-团购界面&lt;/title&gt; &lt;style&gt; /* 1. body
复制链接

扫一扫