纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）

老王Plus 2020-05-28 11:19:44 ⋅ 785 阅读

简介

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

源码地址
https://100boot.cn/public/coupon-web-demo-20200513.zip


注意：本文归作者所有，未经作者允许，不得转载

阅读全部

全部评论: 0 条

    我有话说:

    A3Mall v1.5.2 发布，免费开源的 PHP 小程序商城系统

    商品等功能。前后端全部开源。 软件架构 PHP...

    微信小程序微商城（六）：动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据并加载和点击商品跳转商品详情

    微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式，根据文章内容操作就可以看到效果哦~~~

    纯JS实现复制功能的三种方式，有踩坑

    业余时间写了一个在WX里面分享X宝优惠券的小工具，里面有用到复制T口令的功能，当时以为实现起来很....

    微信小程序微商城（四）：动态API实现商品详情页（上）

    1、实现商品详情页面布局（这篇实现3个模块，头部商品图片轮播、商品价格和商品描述、商品详情展示） 2、根据用户点击不同的商品请求API动态加载数据

    「开源资讯」ShopXO 开源商城，批量导入淘宝、天猫商品插件发布

    最近在OSCHINA上看到有博主开源了全套的商城源码

    微商城小程序源码在哪里下载？

    博主在吗？问一下微商城小程序源码在哪里下载？

    微信小程序微商城（五）：动态API实现商品详情页（下）

    加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发

    微信小程序微商城（九）：微信授权并实现个人中心页面页面

    实现微商城的微信授权并获取用户信息和个人中心页面布局

    GitHub竟然有基于SpringCloud的“网约车”项目，附源码

    有人问小编有没有开源的“网约车”项目源码，并且最好是采用微服务架构设计，这样可以投入技术团队进行二次开发。 小编在GitHub上还真找到了这个项目，接下来一起看一看吧！ 项目介绍 该项目是一款标准且

    微信小程序-template使用：实现购物车商品数量加减功能

    上一篇我们实现了购物车功能，里面有用到template模板功能来实现购物车商品数量加减和价格计算功能......

    SpringBoot+zk+dubbo架构实践（四）：sb+zk+dubbo框架搭建（内附源码GitHub地址）

    本篇案例模拟了一个provider服务提供方和PC、Web两个服务消费方内附GitHub源码......

    理解有符号数和无符号数

      原文链接 理解有符号数和无符号数 声明网上看到的文章，原文找不到了，原文被转载的不成样子，重复很多，整理花了很长时间，在翻看了维基百科后发现，原文中对于负数原码和补码存在一些问题

    微信小程序微商城（十）：用户收货地址管理

    布局收货地址列表和新增收货地址页

    分享一个标星42.4k 的商城管理后台项目模板

    项目简介 mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现，采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品

    推荐一款前端数据源管理工具 algeb

    方案不是很灵活，无法解决共享数据源，数据没回来时怎...

    微信小程序微商城（七）：动态API实现商品分类

    微信小程序商品分类页面布局并且调用动态API获取数据并加载

    微信小程序微商城（八）：缓存实现商品购物车功能

    商品详情页将商品信息放入缓存，购物车页面读取缓存获取商品信息，购物车商品计算和删除缓存商品

    微服务架构：搭建网站扫码登录的功能设计

    微信扫码登录大家都是应用比较多的登录方式了，现在大的购物网站像京东、淘宝等都支持使用APP扫码登录网站了。今天就用APP扫码登录网站的实例来举例说明微服务架构的搭建过程。