logo标签列表

电子邮件开发 - HTML

cssoutlookpositionhtml-emailemail-client
4

我很少制作电子邮件HTML，但我现在正在尝试使用HTML、CSS制作样本电子邮件-我的问题是，当我在Outlook在线上测试时，到处都出现"a"字母，我不确定原因。任何帮助都将不胜感激！谢谢！

输入图片描述

  <style media="screen">

  </style>

</head>
<body bgcolor="#efe1b0">
<!-- Full container for page -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#efe1b0">
    <tr>
      <td>
        <!-- Main email container -->
        <table class="container" width="640" align="center" cellspacing="0" cellpadding="0">

          <!-- Row 1 (Logo) -->
          <tr>
            <td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
              <img style="margin-left: -10px;" src="images/large_logo.gif" alt="Our Vineyard" width="585" height="45" border="0">
            </td>
          </tr>

          <!-- Row 2 (Headline)-->
          <tr>
            <td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
              <h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
            </td>
          </tr>

          <!-- Row 3 (Image Banner) -->
          <tr>
            <td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
              <img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard" />
            </td>
          </tr>

          <!-- Row 4 -->
          <tr>
            <td valign="top" bgcolor="#f5f2e5" class="content" style="padding: 30px 30px 10px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: #654308;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo justo tellus, non fringilla dolor scelerisque vel. Nam hendrerit eros quis elementum gravida. Cras faucibus accumsan erat at pellentesque. Etiam a ultricies enim, eget lacinia sem. Integer et elit orci. Morbi ac mauris sapien. Suspendisse viverra pellentesque orci, imperdiet posuere erat aliquam eu.
              <br><br>Enjoy,<br>
              <img src="images/josh.gif" width="90" height="40" alt="Joshua" />
            </td>
          </tr>

          <!-- Row 5 -->
          <tr>
            <td>

            </td>
          </tr>

          <!-- Row 6 -->
          <tr>
            <td>

            </td>
          </tr>

          <!-- Row 7 -->
          <tr>
            <td>

            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</body>
</html>
请粘贴您正在使用的代码，以便我们查看。 - David
2
以90年代的方式编写HTML - 表格，表格，表格！但不要嵌套太多！一个好的指南：https://www.campaignmonitor.com/dev-resources/guides/coding/ - Pete
1
如果您将代码复制并粘贴到记事本中，这些位置是否有特殊字符？看起来可能有无法解释的空格字符，因此它们被更改为a。 - Pete
1
作为测试，请尝试删除代码中的空格。当粘贴文本时，我曾经遇到过这种情况，它会影响字符编码/间距。 - David
@David 去除空格解决了问题！非常感谢大家的帮助！ - Joshua
显示剩余5条评论
2个回答
1
为了参考我的评论，请关闭你的表格行，即：

<tr>
        <td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
          <img style="margin-left: -10px;" src="images/large_logo.gif" alt="Our Vineyard" width="585" height="45" border="0">
        </td>
      </tr><tr>
        <td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
          <h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
        </td>
      </tr><tr>
        <td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
          <img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard" />
        </td>
      </tr>
0
此外， 1）避免使用边距和填充。 使用td来创建垂直间距。 请参见下面的示例
<td width="20">&nbps;</td>

2) 使用 tr 元素在各个区块之间创建水平间距。

<tr><td style="line-height: 10px; font-size: 10px;">&nbsp;</td></tr>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接