定位练习之团购界面

最新推荐文章于 2022-06-22 21:06:03 发布

407指导员

最新推荐文章于 2022-06-22 21:06:03 发布

阅读量1.4k

点赞数 1

分类专栏： CSS3 文章标签：定位 css

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109730226

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

定位练习之团购界面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>团购页面练习 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 2px solid #cccccc;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }

        div img {
            width: 300px;
            height: 200px;
        }

        /*绝对定位脱离标准流，不区分块/行/行块*/
        div .hot {
            width: 45px;
            height: 44px;
            background: url(images/tuangou.png) 0 -280px no-repeat;
            position: absolute;
            /*display: inline-block;*/
            left: 0;
            top: 0;
        }

        div .price {
            width: 134px;
            height: 42px;
            background: url(images/tuangou.png) 0 -362px no-repeat;
            position: absolute;
            left: -7px;
            top: 163px;
            /*display: inline-block;*/
        }

    </style>
</head>
<body>
<div>
    <img src="images/meat.jpg" alt="丢丢了">
    <span class="hot"></span>
    <span class="price"></span>
    <p>【2店通用】Love Taste爱味道牛排生活馆双人套餐， 免费提供WIFI</p>
</div>
</body>
</html>

在这里插入图片描述

注意点：

1.对于子元素绝对定位时，可以直接在浏览器中调试，最后将实际值在代码中修改。

407指导员

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
定位练习之团购界面

定位练习之团购界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>团购页面练习 </title> <style> * { margin: 0; padding: 0; } div { w
复制链接

扫一扫