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>
相关推荐
小趴菜82272 小时前
安卓人机验证View
android·java·前端
闲人编程3 小时前
2025年,如何选择Python Web框架:Django, Flask还是FastAPI?
前端·后端·python·django·flask·fastapi·web
光影少年3 小时前
react打包优化和配置优化都有哪些?
前端·react.js·掘金·金石计划
Aoda3 小时前
企业级项目结构设计的思考与实践 —— 以 PawHaven 为例
前端·架构
若无_3 小时前
深入理解 Vue 中的 reactive 与 ref:响应式数据的两种核心实现
前端·vue.js
玄魂3 小时前
一键生成国庆节祝福海报,给你的朋友圈上点颜色
前端·javascript·数据可视化
彼日花4 小时前
前端新人30天:从手足无措到融入团队
前端·程序员
搞科研的小刘选手4 小时前
【学术会议合集】2025-2026年地球科学/遥感方向会议征稿信息
大数据·前端·人工智能·自动化·制造·地球科学·遥感测绘
蓝莓味的口香糖4 小时前
【CSS】flex布局
前端·css