简介

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

tsc服饰海外专营店

CHAMPION冠军男女同款美版经典草写印花LOGO 休闲T恤短袖 GT23H

用券后¥59.00 现价¥89426笔成交 ¥30 使用期限 2020.05.09-2020.05.14 立即领券

CSS代码

推荐商品列表区

HTML代码

更多优惠推荐 ¥30

CHAMPION冠军男女同款美版经典草写印花LOGO 休闲T恤短袖 GT23H

89.00447笔成交

用券后¥59.00 优惠券30领取 ¥20

CHAMPION冠军男女同款美版经典草写印花LOGO 休闲T恤短袖 GT23H

39.90177笔成交

用券后¥19.90 优惠券¥30领取

CSS代码

浮动框布局

HTML代码

源码地址

https://100boot.cn/public/coupon-web-demo-20200513.zip

总结

以上是生活随笔为你收集整理的悬浮框_纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。