响应的电子邮件模板错误
我正在制作一个电子邮件模板，我有三个问题似乎无法弄清楚。
- 顶部的图像正在拉伸。
- Gmail App（横向）中的电子邮件无响应
- 左对齐文本在较大屏幕中正确，但在移动屏幕中偏离中心。 （需要在移动屏幕中禁用增加的保证金）
以下是代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f1f1f1;">
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
<a href="https://www.revolutionprep.com?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204;">revolutionprep.com</a>
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
<a href="mailto:answers@revolutionprep.com" style="color:#fd8204;">Email us</a> with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<a href="http://twitter.com/revolutionprep?utm_source=vero&utm_campaign=footer&utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px"></a>
<a href="http://www.facebook.com/RevolutionPrep?utm_source=vero&utm_campaign=footer&utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px"></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/about-us/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">About Revolution</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/how-it-works/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">How We Work</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/find-a-tutor/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Subjects we Tutor</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/success-stories/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Success Stories</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/advice-and-planning/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Advice and Planning</a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr> <nobr>HIGHER TEST SCORES.</nobr> <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
移动左对齐错误 -
Outlook左对齐错误 -
移动Gmail应用程序标题已拉伸，空白区域向右（无响应） -
3 个答案:
答案 0 :(得分：0)
对于左对齐错误，我认为你做错了一点。试试这个。
<td style="padding: 20px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/about-us/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">About Revolution</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/how-it-works/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">How We Work</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/find-a-tutor/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Subjects we Tutor</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/success-stories/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Success Stories</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/advice-and-planning/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Advice and Planning</a></div>
</td>
</tr>
</table>
</td>
我只是修改了填充。希望它会有所帮助。我无法帮你解决你的第一个问题，因为我在jsfiddle检查并运行你的代码，你说的图像问题没有错：/
答案 1 :(得分：0)
对于图像拉伸部分，您是否尝试删除图像上的font-size和line-height？因为它是一个图像，它真的不需要它。 Gmail应用程序有时会添加奇怪的字体大小，这可能是原因。
我同意上面关于错位移动设备的其他答案。每列上都有不同的填充。请参阅第一栏padding: 25px 10px 0px 30px;
答案 2 :(得分：0)
- 对于顶部图片，您需要像这样添加'height'（height = 170，style = height：170px）;
- 对于Gmail App（Android），您需要在body标签下添加“hack”代码。你需要在样式标签中为'gmailfix'类添加样式。添加此代码后，Grail应用程序呈现为桌面版本。
- 以下是我修复的所有代码。您可以复制此代码并在Litmus中进行测试。我已经在所有电子邮件客户端测试过，并且eveything看起来不错。
<img src='http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png' width='170' height='170' border='0' alt='' class='center-on-narrow' style='width: 100%; max-width: 170px; height: auto; max-height:170px; background: #fff;'>
我已经测试了Litmus中的所有浏览器，它们都很好。
...
<style>
.gmailfix {display:none;display:none!important;}
</style>
...
...
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<!-- below is hack for gmail app -->
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
</div>
...
...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
.gmailfix {display:none;display:none!important;}
/* Media Queries */
@media screen and (max-device-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
.mcenter, .mcenter * {text-align: center !important;}
}
</style>
</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
</div>
<center style="width: 100%; background: #f1f1f1;">
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="170" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; max-height:170px; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<tr>
<td align="left" style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
<a href="https://www.revolutionprep.com?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204;">revolutionprep.com</a>
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
<a href="mailto:answers@revolutionprep.com" style="color:#fd8204;">Email us</a> with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<a href="http://twitter.com/revolutionprep?utm_source=vero&utm_campaign=footer&utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px"></a>
<a href="http://www.facebook.com/RevolutionPrep?utm_source=vero&utm_campaign=footer&utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px"></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0;width:100%;max-width:190px;display:inline-block;vertical-align:top;">
<tr>
<td align="left" style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/about-us/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">About Revolution</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/how-it-works/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">How We Work</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/find-a-tutor/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Subjects we Tutor</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/success-stories/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Success Stories</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/advice-and-planning/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Advice and Planning</a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr> <nobr>HIGHER TEST SCORES.</nobr> <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？