电子邮件开发 - HTML

时间:2015-09-18 14:22:04

标签: css outlook position html-email email-client

我很少使用电子邮件HTML,但我目前正在尝试使用HTML,CSS制作示例电子邮件 - 我遇到的问题是,当我在Outlook上测试它时,"''' 34;出现在各地,我不确定为什么?任何帮助表示赞赏!谢谢!

enter image description here
                       

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

2 个答案:

答案 0 :(得分:1)

要提及我的评论,请关闭表格行,IE:

<script type="text/javascript">
$(document).ready(function(){
var num_ads = <?=$num_ads?>;
var loaded_ads = 0;
    $("#more_button").click(function(){
        loaded_ads += 10;
        $.get("e3lanat/get_ads/" + loaded_ads, function(data){
            $("#Ebda2").append(data);

        });

        if(loaded_ads >= num_ads - 10)
        {
            $("#more_button").hide();
            //alert('hide');
        }
    })
})
</script>

答案 1 :(得分:0)

另外, 1)避免使用边距和填充。使用td创建垂直间距。见下文

<td width="20">&nbps;</td>

2)使用tr在部分之间创建水平间距。

<tr><td style="line-height: 10px; font-size: 10px;">&nbsp;</td></tr>