Send-ready single-file email

# 少儿编程暑期招生HTML邮件制作方案

一、兼容性核心原则

• 使用表格布局：Outlook不支持Flex/Grid，必须用 <table> 嵌套排版
• 内联CSS样式：QQ邮箱会过滤部分头部样式，所有样式写在标签的 style 属性中
• 宽度控制在600px左右：主流邮箱客户端的安全显示宽度
• 避免使用：背景图、浮动定位、外部字体、CSS动画

二、红黄配色方案

• 主色：红色 #D93025（标题栏、按钮、强调文字）
• 辅色：黄色 #FFC107（背景条、分割线、标签）
• 底色：浅黄 #FFF8E1（内容区背景，柔和护眼）
• 文字：深灰 #333333，保证可读性

三、结构建议（从上到下）

1. 头部Banner：红色背景区块，黄色大字标题“暑期少儿编程班火热报名中”

2. 优惠亮点区：黄色背景条，红色大字“立减300元”，醒目突出

3. 课程价格表：用 <table> 制作，红底表头（白字），黄色斑马纹行，列含：班型、适合年龄、课时数、价格区间

4. 优惠按钮：按钮不用图片，用表格单元格+背景色实现（Outlook对图片按钮支持差）：

```html

<table cellpadding="0" cellspacing="0">

<tr>

<td bgcolor="#D93025" style="border-radius:6px;">

<a href="报名链接" style="color:#ffffff;padding:12px 40px;

display:inline-block;font-size:18px;text-decoration:none;

font-weight:bold;">立即报名 立减300元</a>

</td>

</tr>

</table>

```

5. 联系方式区：地址、电话、咨询微信，文字形式（勿用图标图片，Outlook常不显示）

6. 底部：浅灰小字版权与退订说明

四、价格表写法要点

• 表头单元格：bgcolor="#D93025" + 白色文字
• 数据行交替使用 #FFF8E1 和白色背景
• 价格用区间表述（如“2000-3000元”），避免具体数字纠纷
• 边框用 border="1" bordercolor="#FFC107"（Outlook兼容）

五、发送前测试清单

• 用 Outlook 桌面版、QQ邮箱网页端、手机端各测试一次显示效果
• 检查按钮链接可点击、表格不变形
• 邮件标题建议含“立减300元”提升打开率

交付形式：单个 .html 文件，可直接复制代码到邮件编辑器HTML源码模式发送。