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 {
                f.........完整代码请登录后点击上方下载按钮下载查看