css布局模仿14款不同电商平台的优惠券效果代码-html代码-BFW代码库

代码语言：html
所属分类：电商
代码描述：css布局模仿14款不同电商平台的优惠券效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>

<head>
    <meta charset="utf-8">


    <style>
        @charset "utf-8";
        /* reset css start */
        html {
            margin: 0;
            height: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            font-size: 62.5%;
        }

        body {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            height: 100%;
            margin: 0 auto;
            padding: 0;
            font-family: "Microsoft Yahei";
            font-size: 1.2rem;
            color: #a1a1a1;
            background: #f5f5f5;
            position: relative;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        a {
            text-decoration: none;
            color: #a1a1a1;
            background: transparent;
            -webkit-tap-highlight-color: transparent;
        }

            a:active {
                color: #8c88ff;
                border: none;
                outline: none;
            }

        article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
            display: block;
        }

        audio, canvas, progress, video {
            display: inline-block;
            vertical-align: baseline;
        }

            audio:not([controls]) {
                display: none;
                height: 0;
            }

        [hidden], template {
            display: none;
        }

        input {
            border: 1px solid #999;
            line-height: normal;
            vertical-align: middle;
            outline: 0;
            border-radius: 0;
            background: #FFFFFF;
            -webkit-appearance: none;
        }

            input[type="radio"], input[type="checkbox"] {
                padding: 0;
                -webkit-tap-highlight-color: rgba(255,255,255,0);
            }

            input[type="number"] {
                -moz-appearance: textfield;
            }

                input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
                    margin: 0;
                    height: auto;
                    -webkit-appearance: none !important;
                }

            input[type="search"] {
                -webkit-appearance: textfield;
            }

                input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
                    -webkit-appearance: none;
                }

            input::-moz-placeholder, textarea::-moz-placeholder {
                font-size: 1.4rem;
                color: #c1c1c1;
            }

            input:-ms-input-placeholder, textarea:-ms-input-placeholder {
                font-size: 1.4rem;
                color: #c1c1c1;
            }

            input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
                font-size: 1.4rem;
                color: #c1c1c1;
            }

        button, input, optgroup, select, textarea {
            margin: 0;
            font: inherit;
            color: inherit;
            -webkit-tap-highlight-color: rgba(255,255,255,0);
        }

        button {
            border: none;
            overflow: visible;
        }

        button, select {
            text-transform: none;
        }

        button, html input[type="button"], input[type="reset"], input[type="submit"] {
            -webkit-appearance: none;
            cursor: pointer;
        }

            button[disabled], html input[disabled] {
                cursor: default;
            }

            button::-moz-focus-inner, input::-moz-focus-inner {
                border: 0;
                padding: 0;
            }

        textarea {
            resize: vertical;
            overflow: auto;
        }

            textarea:focus {
                outline: none;
            }

        h1, h2, h3, h4, h5, h6, p, figure, form, blockquote, ul, ol, li, dl, dd, td, th {
            margin: 0;
            padding: 0;
        }

        h1, h2, h3, h4, h5, h6 {
            font: inherit;
        }

        ul, ol {
            list-style: none;
        }

        em, i {
            font-style: normal;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        label {
            -webkit-tap-highlight-color: rgba(255,255,255,0);
        }

        img {
            max-width: 100%;
            height: auto;
            border: 0;
            vertical-align: middle;
        }

        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .coupon-wrapper {
            width: 100%;
            height: auto;
            padding: 5%;
        }

            .coupon-wrapper .coupon-item {
                width: 100%;
            }

            .coupon-wrapper h3 {
                height: 3rem;
                line-height: 1.8rem;
                font-size: 1.4rem;
                color: #454545;
                padding: 2% 0;
            }

        .coupon-item .nick {
            padding: .66% 0;
            color: #fff;
        }

        .coupon-item .coupon-money {
            width: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            font-size: 1.2rem;
            align-items: center;
        }

            .coupon-item .coupon-money em {
                font-size: 3.8rem;
            }

            .coupon-item .coupon-money .lay:last-child {
                flex: 1;
                padding: 0 3%;
                line-height: 1.66rem;
            }

        .style-one, .style-two, .style-three, .style-four, .style-five, .style-six, .style-seven {
            width: 100%;
            height: 8rem;
            position: relative;
            margin: 5% 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border: 1px solid #E5004F;
        }

            .style-one:after, .style-three .get-btn:after {
                content: "";
                width: 1.2rem;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 23.9%;
                display: block;
                z-index: 9;
                background-color: #fff;
                background-position: 100% 35%;
                background-size: 2rem .66rem;
                background-image: linear-gradient(-45deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-135deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#e5004f 75%),linear-gradient(-135deg,transparent 75%,#e5004f 75%);
            }

            .style-one .info-box, .style-two .info-box, .style-three .info-box, .style-four .info-box, .style-five .info-box, .style-six .info-box, .style-seven .info-box {
                -webkit-box: 1;
                -webkit-flex: 1;
                flex: 1;
                padding: 0 3% 0 10%;
                position: relative;
            }

                .style-one .info-box:before, .style-one .info-box:after, .style-one .get-btn:before, .style-one .get-btn:after, .style-two .info-box:before, .style-two .info-box:after, .style-two .get-btn:before, .style-two .get-btn:after {
                    content: "";
                    width: 1.4rem;
                    height: 2rem;
                    position: absolute;
                    z-index: 9;
                    border-width: 1px;
                    border-style: solid;
                    border-color: transparent #E5004F transparent transparent;
                    -webkit-border-radius: 50%;
                    border-radius: 50%;
                    background-color: #f5f5f5;
                }

                .style-one .info-box:before, .style-two .info-box:before {
                    top: -1.8rem;
                    left: -.5rem;
                    -webkit-transform: rotate(43deg);
                    transform: rotate(43deg);
                }

                .style-one .info-box:after, .style-two .info-box:after {
                    bottom: -1.8rem;
                    left: -.5rem;
                    -webkit-transform: rotate(-43deg);
                    transform: rotate(-43deg);
                }

            .style-one .get-btn:before, .style-two .get-btn:before {
                top: -.8rem;
                right: -.35rem;
                -webkit-transform: rotate(143deg);
                transform: rotate(143deg);
                border-color: transparent;
            }

            .style-one .get-btn:after, .style-two .get-btn:after {
                bottom: -.8rem;
                right: -.35rem;
                -webkit-transform: rotate(-143deg);
                transform: rotate(-143deg);
                border-color: transparent;
            }

            .style-one .get-btn, .style-two .get-btn, .style-three .get-btn, .style-four .get-btn, .style-six .get-btn, .style-seven .get-btn {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24%;
                height: 8rem;
                text-align: center;
                color: #fff;
                font-size: 1.5rem;
                line-height: 1.35;
                background-color: #E5004F;
                position: relative;
            }

                .style-one .get-btn span {
                    width: 1.6rem;
                    padding: .66rem 2rem .66rem 0;
                    display: inherit;
                    margin: 0 auto;
                    word-break: break-all;
                }

            .style-one .nick, .style-four .nick {
                color: #c1c1c1;
            }

            .style-one .of, .style-one .lay .tit, .style-four .of, .style-four .lay .tit, .style-six .nick {
                color: #E5004F;
            }

            .style-one .lay .demand, .style-four .lay .demand {
                color: #454545;
            }

        .style-two {
            background-color: #ED008C;
            border: 1px solid #ED008C;
            color: #fff;
        }

            .style-two:before, .style-two:after {
                content: "";
                height: .5rem;
                position: absolute;
                display: block;
                z-index: 9;
                background-image: linear-gradient(-45deg,#ED008C 25%,transparent 25%,transparent),linear-gradient(-135deg,#ED008C 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#ED008C 75%),linear-gradient(-135deg,transparent 75%,#ED008C 75%);
                background-size: 1rem 1rem;
                background-repeat: repeat-x,repeat-x;
            }

            .style-two:before {
                top: -.4rem;
                left: .5rem;
                right: .5rem;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .style-two:after {
                bottom: -.36rem;
                left: 1.2rem;
                right: 1.38rem;
            }

            .style-two .info-box:before, .style-two .info-box:after {
                border-color: transparent;
            }

            .style-two .get-btn {
                background-color: #ed008c;
            }

                .style-two .get-btn span, .style-three .get-btn span, .style-six .get-btn span, .style-seven .get-btn span {
                    width: 4rem;
                    font-size: 1.8rem;
                    word-break: break-all;
                }

            .style-two .of {
                color: #FFF100;
            }

        .style-three {
            background-color: #378AE8;
            border: none;
            color: #fff;
        }

            .style-three:before {
                content: "";
                position: absolute;
                left: -.66rem;
                width: 2.4rem;
                height: 2.8rem;
                top: 50%;
                -webkit-transform: translate(-30%,-50%);
                transform: translate(-30%,-50%);
                -webkit-box-shadow: 3px 0 0 #aeadad;
                box-shadow: 3px 0 0 #aeadad;
                -webkit-border-radius: 80%;
                border-radius: 80%;
                background-color: #f5f5f5;
            }

            .style-three .get-btn {
                width: 34%;
                background-color: #fff;
            }

                .style-three .get-btn:after {
                    left: 0;
                    background-image: linear-gradient(-45deg,#ffffff 25%,#378ae8 25%,#378ae8);
                }

        .style-six .get-btn, .style-seven .get-btn {
            width: 28%;
            background-color: #fff;
        }

            .style-three .get-btn span, .style-six .get-btn span {
                color: #378AE8;
            }

                .style-three .get-btn span:after, .style-six .get-btn span:after {
                    content: "V";
                    font-size: 1.6rem;
                    display: block;
                }

        .style-four {
            background-color: #fff;
            -webkit-border-radius: 1rem;
            border-radius: 1rem;
            border: 1px dashed #e5004f;
        }

            .style-four .get-btn {
                width: 30%;
                height: 7rem;
                background-color: #fff;
                text-align: center;
            }

                .style-four .get-btn span {
                    display: block;
                    padding: 2.66rem 0;
                    font-size: 1.5rem;
                    word-break: break-all;
                    color: #454545;
                }

        .style-five {
            background-color: #E5004F;
            -webkit-border-radius: 1rem;
            border-radius: 1rem;
            border: none;
            color: #fff;
        }

            .style-five .get-btn {
                width: 28%;
                height: 7rem;
                position: relative;
                -webkit-perspective: 180;
                perspective: 180;
            }

                .style-five .get-btn:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #F8B551;
                    transform: rotateY(-28deg);
                    z-index: 1;
                    -webkit-border-radius: .66rem;
                    border-radius: .66rem;
                    -webkit-box-shadow: -3px 0 8px #793030;
                    box-shadow: -3px 0 8px #793030;
                }

                .style-five .get-btn span {
                    width: 4rem;
                    word-break: break-all;
                    font-size: 1.8rem;
                    color: #454545;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-30%,-50%);
                    transform: translate(-30%,-50%);
                    z-index: 3;
                }

        .style-six {
            background-color: #F7DBCD;
            color: #E5004F;
            border: none;
        }

            .style-six:after, .style-six:before {
                content: "";
                height: .5rem;
                position: absolute;
                left: 0;
                right: 0;
                display: block;
                z-index: 9;
                background-image: linear-gradient(-45deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-135deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#f5f5f5 75%),linear-gradient(-135deg,transparent 75%,#f5f5f5 75%);
                background-size: 1rem 1rem;
                background-repeat: repeat-x,repeat-x;
            }

            .style-six:after {
                top: -.12rem;
            }

            .style-six:before {
                bottom: -.12rem;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .style-six .get-btn span {
                color: #E5004F;
            }

        .style-seven {
            background-color: #F3B502;
            color: #fff;
            border: none;
        }

            .style-seven:before, .style-seven:after {
                content: "";
                position: absolute;
                width: 2rem;
                height: 6rem;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                background-color: #f5f5f5;
                top: 50%;
                -webkit-transform: translate(0,-50%);
                transform: translate(0,-50%);
            }

            .style-seven:before {
                left: -1rem;
                -webkit-box-sha.........完整代码请登录后点击上方下载按钮下载查看