如何创建响应式HTML电子邮件模板
创建响应式HTML电子邮件模板时，关键是确保模板在所有电子邮件客户端中都能正常显示，尤其是在手机和平板上。以下是一个简单的HTML电子邮件模板示例，它使用了响应式设计技术：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Email Template</title>
<style type="text/css">
body { margin: 0; padding: 0; }
table { border-collapse: collapse; }
.header { font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; }
.content { width: 100%; }
.column { display: inline-block; vertical-align: top; }
.left { width: 30%; background-color: #e5e5e5; text-align: center; }
.right { width: 70%; text-align: center; }
@media only screen and (max-width: 600px) {
.content { width: 100%; }
.column { display: block; }
.left, .right { width: 100%; text-align: center; }
}
</style>
</head>
<body>
<table class="header" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th>Header Content</th>
</tr>
</table>
<table class="content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column left">
<img src="https://example.com/image.png" alt="Image" width="200" />
</td>
<td class="column right">
<h1>Main Content Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<!-- Call to action button -->
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td style="border-radius: 4px; background-color: #3498db; text-align: center;" width="200" align="center" valign="middle">
<a href="https://example.com" target="_blank" style="text-decoration: none; color: #ffffff; display: block; padding: 10px 25px;">Button Text</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="footer" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>Footer Content</td>
</tr>
</table>
</body>
</html>这个模板包括了响应式设计的基本原则，例如使用百分比宽度和 \`display: inline-bloc
评论已关闭