用HTml+csss实现优惠券

优惠券主要是做两边的波浪，主要用到的是css3多背景拼接，效果图：

代码：
html:

    <div class="list"><div class="item"><div class="left"><div class="block"><el-row><el-col :span="11"><p class="first"><span>￥</span><span>50元</span></p><p class="second"><span>满100可用</span></p></el-col><el-col :span="13"><p class="third"><span>美食优惠券</span></p><p class="fourth"><span>有效期：2019.10.2020.10.22</span></p></el-col></el-row></div></div><div class="right"><p>立即领取</p></div></div></div>

css：

 .list{.item{overflow: hidden;margin:10px 20px;.left{float: left;}.left{position: relative;width: 500px;height: 190px;background-image: radial-gradient(circle at 1px 8px, transparent 6px, #fff 6px, #fff 0px);background-size: 500px 18px;background-position: 0 0, 500px 0;background-repeat-x: no-repeat;.block{margin:15px;.first,.third{padding:20px 20px;}.second,.fourth{padding:10px 20px;color:#888;}.first{color:#f60d0b;span:nth-child(1){font-size:30px;}span:nth-child(2){font-size:48px;}}.third{color:#000;font-size:36px;}}}.right{position: relative;width:200px;height:190px;background-image: radial-gradient(circle at 199px 8px, transparent 6px, #409EFF 6px, #409EFF 0px);background-size: 200px 18px;background-repeat-x: no-repeat;margin-left:500px;p{width:100px;height:100%;margin:0 auto;color:#fff;line-height:100px;text-align:center;font-size:44px;}}}}

详见：

用HTml+csss实现优惠券相关推荐

vivo 亿级优惠券系统架构设计与实践
作者:vivo互联网开发团队-Yan Chao 一.业务背景优惠券是电商常见的营销手段,具有灵活的特点,既可以作为促销活动的载体,也是重要的引流入口.优惠券系统是vivo商城营销模块中一个重要组成部 ...
测试优惠券要怎么写测试用例？
优惠券类型使用会员抵扣券跳转到购买会员界面,支付时抵扣相应金额. 使用方案抵扣券跳转到方案推荐的深度页面,选择方案支付时抵扣相应金额. 查看可用的优惠券,可选择使用优惠券.我的优惠券页面点击某商品抵 ...
简单的一点总结：关于优惠券功能
写在文前的一些话:理论性质的东西不会涉及,因为自己懂的不多,只是提供自己的一些思路,供大家参考,欢迎指正. 简单的一点需求在现有的项目投资页面添加优惠券功能.点击优惠券区域进入优惠券页面. 优惠券页 ...
开工快乐！AI内参邀你继续学习，并送上50元优惠券！
位来发自凹非寺量子位报道 | 公众号 QbitAI 人工智能已经成为全球科技和产业发展的焦点和趋势,作为AI领域的从业者,你们是如何关注产业发展动态.获取最新科研论文呢? 一直关注AI发展的 ...
基于SpringBoot + Vue的小程序商城项目（附源码），支持分销、团购、秒杀、优惠券。。。...
前些时候一直有粉丝让我分享带分销的商城项目,网上收集了一波,希望能帮到大家. 面向对象该程序是企业在创立初期很好的技术基础框架,加快公司项目开发进度,当然也可以对现有的系统进行升级: 个人开发者也可 ...
当当的羊毛又该剪了！官方活动基础上的额外优惠券，速领！
世界读书日给爱读书的你们最大的优惠力度 423当当自营图书在每满100减50的基础上使用优惠码,叠加立减: 200-30[或]300-60, 相当于只要花170块就能买400的书/240 ...
[deviceone开发]-Star分享的优惠券商户管理端App开源
一.简介这是一个优惠券的商主端,也就是配置发送优惠券的App 页面和交互还是像纳豆那样非常漂亮流畅,大家可以参考一下二.效果图三.相关下载 https://github.com/do-proje ...
悬浮框_纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）
简介最近温习一下HTML5+CSS3的一些特性,准备找个高仿的目标,最后选择了某宝粉丝福利页面,因为这个页面包含的元素比较多.例如:头部品牌信息悬浮.商品属性.优惠券.商品类别等. 实现效果实现效 ...
一个页面区分管理者和普通用户如何设计_电商系统：优惠券原型设计说明（二）...
编辑导读:在整个产品发展的整个周期中,运营活动必不可少,而发放优惠券已成为运营活动的一种基本形式,而关于优惠券设计就尤为重要.本文作者分享了优惠券后台页面的相关设计步骤,推荐给对优惠券感兴趣的童鞋阅读 ...
【通知】3月当当购书大额优惠券赠送，仅限今明两天
好书优惠买机械工业出版社华章公司联合当当网特意为[有三AI]用户申请了一批可与满减叠加使用的"满199减30"或"满99减10"的图书优惠码. 100减50之 ...

用HTml+csss实现优惠券

用HTml+csss实现优惠券相关推荐

最新文章

热门文章