设计精美且专业的验证码邮件模板设计
页面运行效果：
页面源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container { max-width: 600px; margin: 20px auto; font-family: 'Helvetica Neue', Arial, sans-serif; }
.header { text-align: center; padding: 20px; background: #f8f9fa; }
.brand { color: #2c3e50; font-size: 24px; font-weight: bold; }
.content { padding: 30px 20px; background: white; }
.code-box {
background: #e8f4ff;
padding: 25px;
margin: 25px 0;
text-align: center;
border-radius: 8px;
border: 2px dashed #3498db;
}
.code {
color: #3498db;
font-size: 32px;
letter-spacing: 3px;
font-weight: 700;
margin: 10px 0;
}
.note { color: #7f8c8d; font-size: 14px; line-height: 1.6; }
.footer {
text-align: center;
padding: 20px;
color: #95a5a6;
font-size: 12px;
border-top: 1px solid #ecf0f1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="brand">[您的品牌/产品名称]</div>
</div>
<div class="content">
<h2 style="color: #2c3e50; text-align: center;">您的安全验证码</h2>
<div class="code-box">
<div style="color: #7f8c8d; margin-bottom: 10px;">请使用以下验证码完成操作</div>
<div class="code">{$code}</div>
<div style="color: #95a5a6; font-size: 12px; margin-top: 10px;">发送时间：{$time}</div>
</div>
<div class="note">
<p>⚠️ 安全提示：</p>
<ul>
<li>此验证码10分钟内有效</li>
<li>请勿将验证码告知他人</li>
<li>如非本人操作，请立即修改账户密码</li>
</ul>
</div>
</div>
<div class="footer">
<p>此邮件由系统自动发送，请勿直接回复</p>
<p>© {date('Y')} [公司名称] 保留所有权利</p>
<p>需要帮助？请联系 <a href="mailto:support@example.com" style="color: #3498db; text-decoration: none;">客户支持</a></p>
</div>
</div>
</body>
</html>
版权声明：
作者：大黑
链接：https://heids.cn/410.html
文章版权归作者所有，未经允许请勿转载。
THE END