CSS通用优惠券样式

样式如图:

这么点模块css还挺多的,写个demo方便CV

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通用优惠券样式</title>
    <style>
      body {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .coupon-card {
        display: flex;
        width: 100%;
        max-width: 350px;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid red;
      }

      .coupon-left {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
        border-right: 1px dashed #e8e8e8;
      }

      .coupon-image {
        width: 60px;
        height: 60px;
        border: 1px solid green;
      }

      .coupon-middle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 50%;
        padding: 15px 12px;
        border-right: 1px dashed #e8e8e8;
      }

      .coupon-title {
        max-width: 140px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .coupon-condition {
        font-size: 12px;
        color: #999;
      }

      .coupon-right {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
      }

      .use-button {
        background-color: #1890ff;
        color: white;
        border: none;
        border-radius: 16px;
        padding: 6px 12px;
        font-size: 12px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="coupon-card">
      <div class="coupon-left">
        <img
          class="coupon-image"
          src="https://picsum.photos/200/300?random=1"
        />
      </div>

      <div class="coupon-middle">
        <div class="coupon-title">神州租车2天满减券州租车</div>
        <div class="coupon-condition">限指定商品可用</div>
      </div>

      <div class="coupon-right">
        <button class="use-button">去使用</button>
      </div>
    </div>
  </body>
</html>
相关推荐
半生过往11 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听11 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle11 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎11 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特11 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle11 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落11 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金6112711 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户479492835691511 小时前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全
摸着石头过河的石头11 小时前
深入理解JavaScript事件流:从DOM0到DOM3的演进之路
前端·javascript·性能优化