当前位置：首页 > news >正文

前端（各种demo）三：优惠券，热区，等模块的实现（css方式）

news 来源：原创 2024/5/6 4:55:30

各种样式的css实现

1、优惠券样式的实现；

2、热区的实现；

　　在电商平台上总会发出各种券，需要对应到不同的产品，对应到不同的服务。而使用券可以使用UED的设计稿里的照片，但是本来一次性的加载过多的照片，浏览器的负载很大，容易出现一个问题：浏览器内存泄露。最初在谷歌浏览器同时加载1000以上的照片会导致浏览器自动强制关闭网页。所以在开发的时候对于庞大的系统是需要考虑浏览器内存的泄露问题。

券的思路：先做一个div盒子，盒子里放一个数字，一个垂直的线；再做一个圆，覆盖前面一个div右边的框；后边再加一个领券的文字。

热区的思路：先做有一个div盒子，盒子里放一个文字，然后使用一个三角形覆盖前面div盒子的底部。

一、券的实现

1、先来画一个圆

<div style="width: 26px;height: 26px;border-radius: 50%;background:#999999;display: inline-block;"></div>

2、券基本样式

<div style="width: 42px;height: 26px;background:#999999;padding-left: 4px;line-height:26px;color: #fff;display: inline-block;">
            <span>100</span>
            <span style="border-right:1px dashed #fff"></span>
</div>

3、券和圆的合并

        <div style="width: 50px;height: 26px;background:rgb(246, 90, 16);line-height:26px;color: #fff;display: inline-block;text-align: center;">
            <span style="margin-left: -6px">100</span>
        </div>
        <span style="border-right:1px dashed #fff;position: relative;left: -14px;"></span>
        <div style="width: 10px;height: 10px;border-radius: 50%;background: #fff;display: inline-block;margin-left: -10px;position: relative;">
        </div>
        <span>领券</span>

二、热区的实现

这个类似于三角形实现，可以参考这个：http://www.cnblogs.com/chengxs/p/7242647.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .triangle-border {
                width: 0;
                height: 0;
                border-width: 15px;
                border-style: solid;
                position: relative;
                overflow: hidden;
            }
            
            .background {
                bottom: 30px;
                margin-left: -1px;
                border-color: transparent transparent rgb(255, 255, 255) transparent;
            }
        </style>
    </head>

    <body>
        <div style="width: 30px;height: 38px;background:rgb(246, 90, 16);color: #fff;display: inline-block;text-align: center;">
            <span>热</span>
        </div>
        <div class="triangle-border background"></div>
    </body>

</html>