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

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

转载作者：行者123 更新时间：2023-11-28 03:22:37

我知道这可能是一件非常简单的事情，但除了很棒的 Stack Overflow 社区之外，我不知道有谁可以帮助我解决我的问题。我已经有一段时间没有在这种程度上使用 HTML/CSS 了。

我正在尝试为我的企业创建一个新的、更好看的电子邮件模板。首先，我遇到了 WHMCS 的问题，全局 CSS 样式不起作用。因此，为了解决这个问题，我一直在页脚和页眉部分使用内联 CSS(见下文):

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

这是页眉和页脚的代码(两者之间有很大的空间):

<!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>

最佳答案

在我看来，正文文本对您来说是不可见的，因为它的样式设置为 font-size:0px；

您不能像在 Web 上那样依赖 CSS 在电子邮件中工作，因此请确保您内嵌所有样式(就像您所做的那样)。

我对 WHMCS 不熟悉，所以如果我的理解有误，请原谅我。

关于页眉/页脚问题之间的 HTML 电子邮件模板内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45135301/

文章推荐： c++ - 在 C++ 中处理指针和 vector

文章推荐： c++ - 在 CUDA 上生成决策树

文章推荐： android - 如何在 Android 中以离线模式显示 HTML 图像标签

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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