如何制作含指定内容的HTML邮件并添加内嵌文字的蓝色横条

HTML邮件客户端对CSS支持度远低于普通网页，需优先使用内联样式、避免复杂布局属性，以下是兼容绝大多数主流邮件客户端的实现方式：

可用代码示例 #

<!-- 通栏蓝色横条代码 -->
<div style="width: 100%; background-color: #165DFF; padding: 12px 20px; margin: 16px 0; box-sizing: border-box;">
  <p style="margin: 0; color: #ffffff; font-size: 16px; font-weight: 500; text-align: left; line-height: 1.5;">这里填写横条内要显示的文字</p>
</div>

代码说明 #

• 外层div设置width:100%实现横跨页面效果，box-sizing: border-box保证内边距不会撑宽元素
• 背景色可根据需求调整十六进制色值，示例为常用的品牌蓝色
• 内边距padding可以根据想要的横条高度、文字左右边距调整，不需要额外设置高度，靠内边距和文字高度自动撑开适配性更好
• 文字样式全部写在内部p标签的内联样式里，可自行调整字号、对齐方式、字重等属性

更高兼容版（适合对老旧邮件客户端适配要求高的场景） #

如果需要兼容Outlook等对div布局支持较差的客户端，可改用table布局实现：

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;margin:16px 0;">
  <tr>
    <td style="background-color: #165DFF; padding: 12px 20px;">
      <p style="margin: 0; color: #ffffff; font-size: 16px; font-weight: 500; text-align: left; line-height: 1.5;">这里填写横条内要显示的文字</p>
    </td>
  </tr>
</table>

注意事项 #

• 所有样式必须写在内联style属性中，不要使用外部样式表、style标签内的样式，多数邮件客户端会过滤非内联样式
• 颜色统一使用十六进制色值，避免使用rgba、hsl等颜色格式，防止部分客户端不识别
• 不要使用flex、grid、定位等现代布局属性，兼容性差

内容的提问来源于stack exchange，提问作者Adil