简介

最近温习一下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代码

推荐商品列表区

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代码