简介

最近温习一下HTML5+CSS3的一些特性，准备找个高仿的目标，最后选择了某宝粉丝福利页面，因为这个页面包含的元素比较多。例如：头部品牌信息悬浮、商品属性、优惠券、商品类别等。

实现效果

实现效果

设计思路

如上图所示，页面共分为4个区域，分别为：

1、商品图片区

2、商品属性、优惠券区（包括：商品名称、价格、优惠情况等）

3、推荐商品列表区

4、浮动框

备注：最后优化代码将商品图片区和商品属性、优惠券区合并为一个。

代码实现

第一步：整体css样式编写

index.css* {    padding: 0;    margin: 0}body {    font-size: 14px;    line-height: 1.8;    width: 7.5rem;    margin: 0 auto;    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(4%, #f2f2f2), to(#d8d8d8));    background-image: linear-gradient(0deg, #f2f2f2 4%, #d8d8d8 100%)}img {    border: 0;    width: auto \9;    height: auto;    max-width: 100%;    vertical-align: top;    -ms-interpolation-mode: bicubic}a {    text-decoration: none}

第二步：商品区布局

HTML代码

<div class="item-con ">   <div class="item-info-con">     <a>       <div class="shop-info"><img class="shop-logo"                                                                 src="images/logo.jpg_.webp"><span                                class="shop-name">tsc服饰海外专营店</span></div>        <img class="item-img"                             src="images/good_img.jpg_.webp">        <div class="item-info"><p class="title"><span class="postfee-icon"></span>CHAMPION冠军男女同款美版经典草写印花LOGO                            休闲T恤短袖 GT23H</p>            <div class="price-info"><span class="after-price-title">用券后</span><span                                  class="after-price-icon">¥</span><span class="after-price-num">59.00</span>            <span class="price">现价¥89</span><span class="sell-num">426笔成交</span></div>            </div>      </a>      <div class="coupon-btn get-coupon-btn"                         style="background-image: url(images/coupon_bg.jpg_.webp);">          <div class="coupon-info"><span class="coupon-icon">¥</span><span                                class="coupon-amount">30</span></div>          <div class="coupon-date">使用期限 2020.05.09-2020.05.14</div>          <div class="btn-name">立即领券</div>   	</div>   </div></div>

CSS代码

<style type="text/css">        .item-con {            width: 100%;            -webkit-box-sizing: border-box;            box-sizing: border-box;            position: relative;            z-index: 9;        }        .item-con .postfee-icon {            display: inline-block;            width: 0.44rem;            height: 0.24rem;            background: url(images/baoyou-icon-66-36.png) no-repeat;            background-size: cover;            margin-right: 0.05rem;        }        .item-con .item-info-con {            width: 6.8rem;            margin: 0.2rem auto;            border-radius: 0.32rem;            background: #fff;            position: relative;            overflow: hidden;        }        .item-con .item-img {            width: 6.8rem;            height: 6.8rem;        }        .item-con .shop-info {            position: absolute;            left: 0;            top: 0;            height: 0.8rem;            width: 100%;            background: rgba(255, 255, 255, 0.8);        }        .item-con .shop-info .shop-logo {            height: 0.6rem;            margin: 0.1rem 0.2rem;        }        .item-con .shop-info .shop-name {            line-height: 0.8rem;            font-size: 0.3rem;            color: #4a4a4a;        }        .item-con .item-info {            padding: 0.15rem;        }        .item-con .item-info .title {            color: #4a4a4a;            font-size: 0.28rem;            line-height: 0.4rem;            overflow: hidden;            white-space: nowrap;            text-overflow: ellipsis;        }        .item-con .item-info .price-info {            overflow: hidden;        }        .item-con .item-info .after-price-title {            font-size: 0.28rem;            height: 0.38rem;            line-height: 0.36rem;            -webkit-transform: scale(0.72);            transform: scale(0.72);            -webkit-transform-origin: left 80%;            transform-origin: left 80%;            color: #fff;            background: #f44;            padding: 0 0.1rem;            display: inline-block;            border-radius: 0.05rem;        }        .item-con .item-info .after-price-icon {            font-size: 0.28rem;            -webkit-transform: scale(0.72);            transform: scale(0.72);            color: #f44;            -webkit-transform-origin: left bottom;            transform-origin: left bottom;            display: inline-block;            margin-left: -0.2rem;            line-height: 1;        }        .item-con .item-info .after-price-num {            font-size: 0.36rem;            color: #f44;            vertical-align: middle;            font-weight: 600;            line-height: 1;            margin-right: 0.15rem;        }        .item-con .item-info .price {            font-size: 0.24rem;            color: #9b9b9b;            vertical-align: middle;            line-height: 1.2;            margin-top: 0.02rem;            display: inline-block;        }        .item-con .item-info .sell-num {            float: right;            color: #9b9b9b;            font-size: 0.24rem;            line-height: 1.2;            position: relative;            top: 0.15rem;        }        .item-con .coupon-btn {            width: 6.65rem;            height: 1.15rem;            margin: 0 auto;            background-repeat: no-repeat;            background-size: 6.65rem 1.15rem;            -webkit-box-sizing: border-box;            box-sizing: border-box;        }        .item-con .get-coupon-btn {            cursor: pointer;            position: relative;            padding-left: 0.35rem;            padding-top: 0.05rem;            left: 0.075rem;        }        .item-con .get-coupon-btn .btn-name {            position: absolute;            right: 0;            top: 0;            color: #fff;            font-size: 0.32rem;            line-height: 1.15rem;            text-align: center;            height: 1.15rem;            width: 2.2rem;        }        .item-con .get-coupon-btn .coupon-icon {            font-size: 0.3rem;            color: #fff;            line-height: 1;            margin-right: 0.1rem;        }        .item-con .get-coupon-btn .coupon-amount {            font-size: 0.72rem;            color: #fff;            line-height: 1;            font-weight: 500;        }        .item-con .get-coupon-btn .coupon-date {            line-height: 1;            font-size: 0.24rem;            color: rgba(255, 255, 255, 0.67);        }        .J_hasMJMZ.item-con .item-info-con {            height: 10.62rem;        }        .J_hasMJMZ.item-con .get-coupon-btn {            bottom: 1.38rem;        }        @media screen and (max-width: 330px) {            .item-con .get-coupon-btn .coupon-date {                -webkit-transform: scale(0.9);                transform: scale(0.9);                -webkit-transform-origin: left top;                transform-origin: left top;            }            .item-con .item-info {                padding: 0.1rem;            }        }        .android .item-con .item-info .after-price-title {            height: 0.4rem;            line-height: 0.4rem;            -webkit-transform: scale(0.72);            transform: scale(0.72);            -webkit-transform-origin: left 40%;            transform-origin: left 40%;        }    </style>    <style type="text/css">body {        background: #f6f6f6;    }    .coupon-item .shop-info {        text-align: center;        height: 4.4rem;        padding-top: 0.4rem;    }    .coupon-item .shop-info .shop-logo {        background-size: 1.08rem auto;        background-repeat: no-repeat;        width: 1.08rem;        height: 1.08rem;        line-height: 1.62rem;        display: block;        margin: 0 auto 0.1rem;        border-radius: 50%;        overflow: hidden;        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);    }    .coupon-item .shop-info .coupons-wrap .coupons-price strong {        font-size: 0.5rem;        display: inline-block;        height: 0.45rem;        line-height: 0.45rem;        margin-right: 0;        font-weight: 400;    }    .coupon-item .item-wrap .item-detail .pic img {        border: 1px solid #c6c6c6;        width: 2.425rem;        height: 2.425rem;        overflow: hidden;    }    .coupon-item .item-wrap .item-detail .item-content .title span {        font-size: 0.25rem;        line-height: 0.35rem;        overflow: hidden;        height: 0.72rem;        color: #333;        display: -webkit-box;        text-overflow: ellipsis;        -webkit-line-clamp: 2;        -webkit-box-orient: vertical;    }    .coupon-item .item-wrap .item-detail .item-content .discount .sale em {        font-size: 0.25rem;        font-style: normal;        display: inline-block;        width: 0.35rem;        text-align: center;    }    </style>

推荐商品列表区

HTML代码

            <div class="item-list-con">                <div class="recommend-title J-recommend-title">更多优惠推荐                    <div class="recommend-title-line"></div>                </div>                <div class="recommend-item">                    <div class="recommend-coupon-icon"><span class="recommend-coupon-num-icon">¥</span><span                            class="recommend-coupon-num">30</span></div>                    <img data-observer-type="img" cell-computewithroot="true"                         class="recommend-item-img J-recommend-item-img"                         src="images/good_img.jpg_.webp">                    <div class="info-con"><p class="title">CHAMPION冠军男女同款美版经典草写印花LOGO                        休闲T恤短袖 GT23H</p>                        <p class="price-sell"><span class="price">89.00</span><span class="sell-num">447笔成交</span></p>                        <div><span class="coupon-price-title">用券后</span><span class="coupon-price-icon">¥</span><span                                class="coupon-price-num">59.00</span></div>                        <div class="coupon-btn"                             style="background-image: url(images/youhuiquan_bg_small_300x300.jpg_.webp);">                            <span class="coupon-btn-title">优惠券</span><span class="coupon-btn-num">30</span><span                                class="coupon-btn-name">领取</span></div>                    </div>                </div>                <div class="recommend-item">                    <div class="recommend-coupon-icon"><span class="recommend-coupon-num-icon">¥</span><span                            class="recommend-coupon-num">20</span></div>                    <img data-observer-type="img" cell-computewithroot="true"                         class="recommend-item-img J-recommend-item-img"                         src="images/good_img.jpg_.webp">                    <div class="info-con"><p class="title">CHAMPION冠军男女同款美版经典草写印花LOGO                        休闲T恤短袖 GT23H</p>                        <p class="price-sell"><span class="price">39.90</span><span class="sell-num">177笔成交</span></p>                        <div><span class="coupon-price-title">用券后</span><span class="coupon-price-icon">¥</span><span                                class="coupon-price-num">19.90</span></div>                        <div class="coupon-btn"                             style="background-image: url(images/youhuiquan_bg_small_300x300.jpg_.webp);">                            <span class="coupon-btn-title">优惠券</span><span class="coupon-btn-num">¥30</span><span                                class="coupon-btn-name">领取</span></div>                    </div>                </div>            </div>

CSS代码

<style type="text/css">.item-list-con .recommend-title {        text-align: center;        font-size: 0.28rem;        color: #333;    }    .item-list-con .recommend-title-line {        height: 0.06rem;        width: 1.3rem;        background: #f44;        margin: 0 auto;        border-radius: 0.03rem;    }    .item-list-con .recommend-item {        width: 3.42rem;        height: 6.03rem;        background: #fff;        display: inline-block;        margin-left: 0.22rem;        margin-top: 0.22rem;        border-radius: 0.2rem;        overflow: hidden;        cursor: pointer;        position: relative;    }    .item-list-con .recommend-item .recommend-coupon-icon {        width: 0.76rem;        height: 0.77rem;        background: url(images/youhuiquan_icon.png) no-repeat;        background-size: cover;        position: absolute;        top: 0;        left: 0.2rem;        text-align: center;        padding-top: 0.16rem;        -webkit-box-sizing: border-box;        box-sizing: border-box;    }    .item-list-con .recommend-item .recommend-coupon-num-icon {        font-size: 0.24rem;        color: #fff;    }    .item-list-con .recommend-item .recommend-coupon-num {        font-size: 0.32rem;        color: #fff;    }    .item-list-con .recommend-item .recommend-item-img {        width: 3.42rem;        height: 3.42rem;    }    .item-list-con .recommend-item .info-con {        padding: 0.16rem;    }    .item-list-con .recommend-item .title {        font-size: 0.26rem;        line-height: 0.36rem;        height: 0.72rem;        overflow: hidden;        text-overflow: ellipsis;        display: -webkit-box;        -webkit-line-clamp: 2;        -webkit-box-orient: vertical;    }    .item-list-con .recommend-item .price-sell {        color: #bdbdbd;        font-size: 0.24rem;    }    .item-list-con .recommend-item .price-sell .price {        text-decoration: line-through;    }    .item-list-con .recommend-item .price-sell .sell-num {        float: right;    }    .item-list-con .recommend-item .coupon-price-title {        font-size: 0.24rem;        color: #4a4a4a;    }    .item-list-con .recommend-item .coupon-price-icon {        font-size: 0.26rem;        color: #ff4f00;        margin: 0 0.05rem;    }    .item-list-con .recommend-item .coupon-price-num {        color: #ff4f00;        font-size: 0.32rem;        font-weight: 500;    }    .item-list-con .recommend-item .coupon-btn {        width: 3rem;        height: 0.48rem;        background-size: 3rem 0.48rem;        background-repeat: no-repeat;        position: relative;        color: #ff4f00;        line-height: 0.46rem;        font-size: 0.24rem;        -webkit-box-sizing: border-box;        box-sizing: border-box;        margin-left: 0.05rem;        padding-right: 0.8rem;        text-align: center;    }    .item-list-con .recommend-item .coupon-btn .coupon-btn-num {        font-size: 0.3rem;        margin-left: 0.1rem;        font-weight: 500;    }    .item-list-con .recommend-item .coupon-btn .coupon-btn-name {        position: absolute;        width: 0.85rem;        text-align: center;        right: 0;        top: 0;        line-height: 0.47rem;    }    </style>

浮动框布局

HTML代码

<div style="position: fixed; right: 0px; bottom: 100px; width: 60px; height: 60px;z-index: 99"><img        data-action="showDialog"        class="J_sdasdnbhkbdas"        style="width:100%;height:100%;cursor:pointer;"        src="images/new-people-bg-120-120.png">