前端（各種demo）三：優惠券，熱區，等模塊的實現（css方式） - chengxs @ IT工程師數位筆記本

文章出處

各種樣式的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>