当前位置：首页 > news >正文

CSS通用优惠券样式

news 2025/9/30 7:06:42

样式如图：
在这里插入图片描述
这么点模块css还挺多的，写个demo方便CV

<!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"><imgclass="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>