css 优惠劵

最新推荐文章于 2023-12-30 15:05:02 发布
最新推荐文章于 2023-12-30 15:05:02 发布
阅读量265 收藏 2
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqlibo205/article/details/108125095
版权

 

<html>
<head>
<style type="text/css">
 

.body {
    background: #fff;
    height: 100%;
}

.item {
    margin: 0px;
    height: 230px;
    background: #fff;
    margin-bottom: 30rpx;
    position: relative;
    display: flex;
}

.left {
    display: block;
    border-right: 0.1px dashed  #F5F5F5;
    width: 70%;
    border-radius: 20px;

}

.bg-red {
    background:  red
}

.bg-red-gradual {
    background: linear-gradient(to right, hsl(359, 92%, 66%), hsl(359, 80%, 60%), hsl(359, 99%, 50%));
    
     
}

.bg-gray {
    background:  #a9a9a9;
}

.bg-gray-gradual {
    background: linear-gradient(to right, #d3d3d3, #c0c0c0, #a9a9a9);
}


.txt-red {
    color: red;
}

.txt-gray {
    color: #a9a9a9;
}

.right {
    display: block;
    left: 1rpx;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 30%;
}

.item .time {
    text-align: center;
    font-size: 26px;
    display: block;
    color: white;
}

.item .fracture {
    text-align: center;
    font-size: 38px;
    display: block;
    color: white;
}

.item .fracture text {
    font-size: 70px;
    color: white;
}

.item .desc {
    text-align: center;
    display: block;
}

.item .desc text {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 28px;
    background: white;
}

.item .right .type {
    display: block;
    text-align: center;
    font-size: 30px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -30px;
    height: 76px;
    width: 26%;
    border-radius: 60px;
}

.item .right .txt1 {
    color: red;
    background: white;
}

.item .right .txt2 {
    color: #a9a9a9;
    background: #f5f5f5;
}

.item .right .txt3 {
    color: #a9a9a9;
    background: #f5f5f5;
}
 

 
</style>
</head>

<body>
 
<view class="page" scroll-y="true">
    <view  class="body">

        <view class="item " >

            <view class="left  bg-red-gradual">
                <view class="fracture">
                    <text>998</text>优惠券</view>

                <view class="desc">
                    <text class="txt-red"> 仅限于疯抢商城品牌折扣商品</text>
                </view>
                <view class="time">使用时间</view>
            </view>

            <view class="right bg-red">
                    <button class="type txt1"  >立即使用</button>
            
            </view>

        </view>

        <view class="item" >

            <view class="left  bg-gray-gradual">
                <view class="fracture">
                    <text>333</text>优惠券</view>

                <view class="desc">
                    <text class="txt-gray">仅限于疯抢商城品牌折扣商品</text>
                </view>
                <view class="time">使用时间</view>
            </view>

            <view class="right  bg-gray "> 
                
                <button class="type txt2" wx:if='{{item.type == 2}}'>已过期</button>
              
            </view>

        </view>


    </view>

</view>
</html>

Mr_LiBo
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用纯 CSS 实现优惠券效果
CodeFunTeam的博客
07-15 3330
CODE.FUN TAEM
CSS实现各种优惠券效果
最新发布
JavaScritp
04-29 688
CSS实现各种优惠券效果。
css技巧分享（优惠券缺角样式实现）
专注java二开部署
11-15 320
【代码】css技巧分享（优惠券缺角样式实现）
css实现优惠券的样式
0的0次方的博客
07-12 746
用css样式也可以实现优惠券
CSS 实现优惠券的技巧
一口Linux的专栏
03-30 2182
在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 还有这样的 考虑到各种可能出现的场景，抽象出以下几种案例，一起来看看实现吧 一、最佳实现方式 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 基本语法很简单，和background的语法基本一致 .content{ -webkit-mask: '遮罩图片' ; }
纯CSS优惠券效果
03-18
纯CSS样式编写的优惠券源码
CSS实现优惠券边沿打孔效果
09-24
本文给大家分享使用纯css写的一个边沿打孔效果，需要的朋友参考下
纯css3优惠券效果
01-09
一款纯CSS3制作优惠券线性UI网页特效,该HTML5+CSS3特效适合移动端、PC端优惠劵活动网页制作使用、不用图片也可以制作完美极致UI优惠劵效果
纯css3优惠券效果特效代码
03-20
纯CSS3制作优惠券线性UI效果
于忠会的博客
12-30 748
纯CSS3制作优惠券线性UI效果-遇见你与你分享
纯css3优惠券 css 无js
09-02
纯css3书写的优惠券，自适应屏幕大小
纯css3制作精美的购物优惠券样式代码
11-24
纯css3制作精美的购物优惠券样式代码
CSS3 优惠券
司马懿的西山居
12-05 5267
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;utf8&amp;amp;quot;&amp;amp;amp;gt; &amp;amp
css绘制卡券优惠券_利用css3径向渐变做一张优惠券的示例
weixin_39593427的博客
01-14 218
在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘，嗯，有这样想过，如今css3技术这么先进再用背景做平铺是不是已经out了，那么今天给大家介绍一个用css3径向渐变做的优惠券。CSS3 径向渐变和线性渐变是很相似的，首先来看其语法：-moz-radial-gradient([ ||...
coupon优惠券 -- CSS样式
edwardwzw的博客
10-25 3825
/* coupon */ /*HTML structure: /* 无边框 券样式 <span class="coupon-quan">10元券</span> /*无边框 返样式 <span class="coupon-fan">返8.7</span> /*有边框 券 base64 版本 <span class="coupon-quan-border">10元券</span> ..
CSS实现优惠券特殊样式的技巧
JackieDYH的博客
03-24 3239
Web 开发过程中，总会遇到各种各样的布局，比如下面的各种“优惠券”，一起来看看吧 一、最佳实现方式 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 基本语法很简单，和background的语法基本一致 .content{ -webkit-mask: '遮罩图片' ; } /*完整语法*/ .content{ -webkit-mask: '遮罩图片' [position] / [size] ; }...
css优惠卷样式
ln1138932964的博客
08-19 252
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内圆角</tit
如何使用css创建一个优惠券
大师兄
10-19 1275
原文链接:https://dsx2016.com/?p=649 需求场景 添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用css. 网上有几种方案: 一种是boder+clip的形式,裁剪出4个小半圆角,拼凑在一起 一种是radial-gradi...
帮我用css3生成一个优惠券的样式，用代码实现
04-13
好的，下面是帮您生成优惠券的 CSS3 代码，请参考： ``` /* 优惠券样式 */ .coupon { background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px #aaa; display: inline-block; padding: 20px; position: relative; } .coupon:before, .coupon:after { content: ""; position: absolute; } .coupon:before { border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; bottom: -10px; left: 50%; transform: translateX(-50%); } .coupon:after { border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; top: -10px; left: 50%; transform: translateX(-50%); } /* 优惠码样式 */ .coupon .code { background-color: #f2f2f2; border-radius: 5px; color: #666; display: inline-block; font-size: 24px; font-weight: bold; padding: 5px 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 使用时只需要在 HTML 中加上 `.coupon`、`.coupon .code` 两个类名即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值