CSS实操，运用浮动和定位实现商品购物免息和优惠等堆叠框

本文链接：https://blog.csdn.net/qq_55006020/article/details/131438051

做出类似这种效果：

分析

以上图

1，有4个不同的手机品牌分别实现了不同的堆叠效果 ,图片素材还有字体可以只有更换，懒得找素材，就用网上的一张图片代替。

2，比如免息。优惠。待定，和待定2，运用了定位知识点

3，p文字实现了超出部分用...代替

4，底层效果和内部4个容器运用了浮动知识点。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免息和优惠框层叠效果</title>
<!--    这篇文档，主要运用浮动和相对定位 去处理图片上面添加类似于优惠/免息这种小窗口
步骤，先设置好一个窗口，最后才浮动他们使之摆放
-->

    <style>
/*<!--       给容器添加一个效果 -->*/
        .root{
            /*设置宽度*/
            width: 1200px;
            /*容器居中*/
            margin: 0 auto;
            /*增加一个颜色看看位置*/
            background-color: gainsboro;
            /*字体居中*/
            text-align: center;
        /*    清楚浮动带来的弊端*/
            overflow: hidden;
            clear: both;


        }
    /*    把a字体去掉*/
        .root div a{
            text-decoration: none;
        }
    /*    把p的多余部分给隐藏掉*/
        .root div p{
            width: 250px;
            /*组合使用 使其超出部分隐藏用过...代替*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /*p的颜色只是让我们看看这个位置在哪里 ，所以用完可以注释掉*/
            /*background-color: pink;*/
        }
        .box1{
            /*给这个盒子设置一个宽度*/
            width: 250px;
            /*这个*/
            /*background-color: pink;*/
            /*设置这个盒子的外边距*/
            margin: 10px;
            padding: 1px;
            background-color: white;
        /*    盒子给我浮动起来*/
            float: left;
        /*    但是浮动起来*/
        }
        .mianxi{
            /*这个是设计免息标签*/
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /*以上是让他变成一个圆，然后用背景颜色显示*/
            background-color: red;
            /*当容器id高度确定后，文本的高度跟他一样高，那么文字就会居中显示*/
            line-height: 50px;
        /*    让他绝对定位*/
            position: relative;
            bottom:360px;
            left: 45px;
            /*背景虚化一下*/
            opacity: 0.9;
        }

    </style>

</head>
<body>

<div class="root">
    <div class="box1">
        <a href="#">
<!--        插入图片，修改图片大小-->
        <img src="手机.jpg" alt="" style="width: 250px">
        <h3>魅族20</h3>
<!--        回头设置这段话 小数点形式显示-->
        <p>【独白，已补货,数量有限】【6月20-6月30等等等等等】</p>
        <span>2999￥</span>
        <div class="mianxi">
            <span>免息</span>
        </div>
        </a>
    </div>
    <div class="box1">
        <a href="#">
<!--        插入图片，修改图片大小-->
        <img src="手机.jpg" alt="" style="width: 250px">
        <h3>魅族21</h3>
<!--        回头设置这段话 小数点形式显示-->
        <p>【独白，已补货,数量有限】【6月20-6月30等等等等等】</p>
        <span>价格：我也不知道￥</span>
        <div class="mianxi">
            <span>优惠</span>
        </div>
        </a>
    </div>
    <div class="box1">
        <a href="#">
<!--        插入图片，修改图片大小-->
        <img src="手机.jpg" alt="" style="width: 250px">
        <h3>魅族22</h3>
<!--        回头设置这段话 小数点形式显示-->
        <p>【独白，已补货,数量有限】【6月20-6月30等等等等等】</p>
        <span>敬请期待￥</span>
        <div class="mianxi">
            <span>待定</span>
        </div>
        </a>
    </div>
    <div class="box1">
        <a href="#">
<!--        插入图片，修改图片大小-->
        <img src="手机.jpg" alt="" style="width: 250px">
        <h3>魅族23</h3>
<!--        回头设置这段话 小数点形式显示-->
        <p>【独白，已补货,数量有限】【6月20-6月30等等等等等】</p>
        <span>敬请期待￥</span>
        <div class="mianxi">
            <span>待定2</span>
        </div>
        </a>
    </div>


</div>



</body>
</html>