页眉/页脚问题之间的HTML电子邮件模板内容

时间：2017-07-17 02:52:43

标签： html css email whmcs

我知道这可能是非常简单的事情，但除了令人敬畏的Stack Overflow社区之外，我不会认识任何可以帮助我解决问题的人。我暂时没有使用HTML / CSS。

我正在尝试为我的商家创建一个更好看的新电子邮件模板。首先，我遇到了WHMCS的问题，其中全局CSS样式不起作用。因此，为了解决这个问题，我一直在页脚和标题部分使用内联CSS（见下文）：

WHMCS Email Settings

我现在遇到的问题是页眉和页脚似乎是分开的，而在中间，我想要的是电子邮件内容，即使我在那里输入文本，也只有空格。我希望中间内容部分遵循上下的样式，使其看起来无缝，以便可以在那里输入文字。

这是页眉和页脚的代码（两个之间的大空间）：

＆＃13;
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
</style>
</head>
<body>
<table data-module="header" class="email_table currentTable" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box;border-spacing: 0;mso-table-lspace: 0;mso-table-rspace: 0;width: 100%;min-width: 100%!important;">
<tr>
<td class="email_body email_start" data-bgcolor="Body" style="box-sizing: border-box;vertical-align: top;line-height: 100%;text-align: center;padding-left: 16px;padding-right: 16px;padding-top: 32px;background-color: #dde5ee;font-size: 0!important;">
<!--[if (mso)|(IE)]><table width="800" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:800px;Margin:0 auto;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->

<div class="email_container" style="box-sizing: border-box;font-size: 0;display: inline-block;width: 100%;vertical-align: top;margin: 0 auto;text-align: center;line-height: inherit;max-width: 800px!important;">
<table class="content_section" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box;border-spacing: 0;mso-table-lspace: 0;mso-table-rspace: 0;width: 100%;min-width: 100%!important;">
<tr>
  <td class="content_cell header_c brt pt pb" data-bgcolor="Content" data-border-top-color="Accent" style="box-sizing: border-box;vertical-align: top;font-size: 0;display: inline-block;width: 100%;text-align: center;background-color: #ffffff;border-top: 4px solid #2376dc;border-radius: 4px 4px 0 0;padding-top: 16px;padding-bottom: 16px;line-height: inherit;">
    <!-- col-6 -->

    <div class="email_row" style="box-sizing: border-box;font-size: 0;display: block;width: 100%;vertical-align: top;margin: 0 auto;text-align: center;clear: both;line-height: inherit;max-width: 600px!important;">
      <!--[if (mso)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:600px;Margin:0 auto;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->

      <div class="col_6" style="box-sizing: border-box;font-size: 0;display: inline-block;width: 100%;vertical-align: top;max-width: 600px;line-height: inherit;">
        <table class="column" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box;border-spacing: 0;mso-table-lspace: 0;mso-table-rspace: 0;width: 100%;min-width: 100%!important;">
          <tr>
            <td class="column_cell px pt_xs pb_0 logo_c tc" data-color="Content" data-link-color="Accent" style="box-sizing: border-box;vertical-align: top;width: 100%;padding-top: 8px;padding-bottom: 0;font-family: Helvetica,Arial,sans-serif;font-size: 16px;line-height: 100%;color: #616161;mso-line-height-rule: exactly;text-align: center;padding-left: 16px;padding-right: 16px;min-width: 100%!important;">
               <a href="#" data-color="Accent" style="text-decoration: none; line-height: inherit; color: rgb(35, 120, 220);"><img src="https://hypeservers.com/wp-content/uploads/2016/10/Logomakr_0tDvse-2.png" width="110" height="24" alt="Hype Servers" style="max-width: 168px;outline: none;border: 0;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;line-height: 100%;height: auto!important;" /></a>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </td>
</tr>
<tr>
            <td valign="top" class="bodyContent" style="box-sizing: border-box;vertical-align: top;font-size: 0;display: inline-block;width: 100%;text-align: center;background-color: #ffffff;line-height: inherit;">
              <p>'Hello'</p>
            </td>

      <!--[if (mso)|(IE)]></td></tr></table><![endif]-->


<!-- </table> -->
<!-- </div> -->
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->

<!-- </td> -->
<!-- </tr> -->
<!-- </table> -->





</table>
</div>
</td>
</tr>
</table>
<table data-module="footer_center" class="email_table" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; min-width: 100% !important;"><tr><td class="email_body email_end" data-bgcolor="Body" style="box-sizing: border-box; vertical-align: top; line-height: 100%; text-align: center; padding-left: 16px; padding-right: 16px; padding-bottom: 32px; font-size: 0 !important; background: #dde5ee;" align="center" bgcolor="#dde5ee" valign="top">
<!--[if (mso)|(IE)]>
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:800px;Margin:0 auto;">
<tbody>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="email_container" style="box-sizing: border-box; font-size: 0; display: inline-block; width: 100%; vertical-align: top; text-align: center; line-height: inherit; max-width: 800px !important; margin: 0 auto;" align="center">
<table class="content_section" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; min-width: 100% !important;"><tr><td class="content_cell footer_c py bt brb" data-bgcolor="Accent" data-border-top-color="Default" style="box-sizing: border-box; vertical-align: top; font-size: 0; display: inline-block; width: 100%; text-align: center; border-radius: 0 0 4px 4px; padding-top: 16px; padding-bottom: 16px; border-top-width: 1px; border-top-style: solid; border-top-color: #d7dbe0; line-height: inherit; background: #ffffff;" align="center" bgcolor="#ffffff" valign="top">
        <!-- col-6 -->
        <div class="email_row" style="box-sizing: border-box; font-size: 0; display: block; width: 100%; vertical-align: top; text-align: center; clear: both; line-height: inherit; max-width: 600px !important; margin: 0 auto;" align="center">
        <!--[if (mso)|(IE)]>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="vertical-align:top;width:600px;Margin:0 auto;">
<tbody>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
          <div class="col_6" style="box-sizing: border-box; font-size: 0; display: inline-block; width: 100%; vertical-align: top; max-width: 600px; line-height: inherit;">
            <table class="column" width="100%" border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%; min-width: 100% !important;"><tr><td class="column_cell tc pb_0" data-color="Footer" data-link-color="Footer Link" style="box-sizing: border-box; vertical-align: top; width: 100%; padding-top: 16px; padding-bottom: 0; font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 23px; color: #999999; mso-line-height-rule: exactly; text-align: center; min-width: 100% !important;" align="center" valign="top">
                    <p class="fsocial" data-color="Footer" style="font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 100%; color: #999999; mso-line-height-rule: exactly; display: block; margin-top: 0; margin-bottom: 16px;">
<a href="#" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
</a>
   <a href="#" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
<img src="http://www.stampready.net/dashboard/editor/user_uploads/zip_uploads/2017/07/16/HZUKBlFvVrCsqQm6I51iRE7A/stampready_template/images/twitter_64_dark.png" width="24" height="24" alt="" style="max-width: 24px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; clear: both; line-height: 100%; height: auto !important; border: 0;" /></a>
   <a href="#" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
</a>
</p>
                    <p data-color="Footer" style="font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 23px; color: #999999; mso-line-height-rule: exactly; display: block; margin-top: 0; margin-bottom: 16px;">
                      ©2017 Hype Servers<br />
                      3000 Fake Address Way, Fake Town 736278. 																</p>
                    <p data-color="Footer" style="font-family: 'Open Sans',sans-serif !important; font-size: 16px; line-height: 23px; color: #999999; mso-line-height-rule: exactly; display: block; margin-top: 0; margin-bottom: 16px;">
                      You are subscribed to Hype Servers Mailing List. <a href="#" data-color="Footer Link" style="text-decoration: underline; line-height: inherit; color: #999999; display: inline-block;">
<span data-color="Footer Link" style="text-decoration: underline; line-height: inherit; color: #999999;">
Unsubscribe</span>
</a>
                    </p>
                  </td>
                </tr></table></div>
        <!--[if (mso)|(IE)]>
</td>
</tr>
</tbody>
</table>
<![endif]-->
        </div>
      </td>
    </tr></table></div>
<!--[if (mso)|(IE)]>
</td>
</tr>
</tbody>
</table>
<![endif]-->
</td>
</tr></table></body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

在我看来，身体复制文本对你来说是不可见的，因为它的样式是font-size：0px;

你不能像在网上那样依赖CSS来处理电子邮件，所以要确保你内联所有的样式（如你所做的那样）。

我对WHMCS并不熟悉所以请原谅我，如果我在这里有错误的结局。

相关问题
最新问题