0

我创建了一个 html 电子邮件,需要图像“clipboard3.png”显示在图像的背景中,然后所有表格内容都应该位于图像的顶部。现在,没有图像,表格内容对齐到中心,但是当我将图像添加到正文中时,表格及其内容都被推到了左边。

我该如何解决这个问题?我试图在所有表格上“对齐:居中”等,但似乎没有任何效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Email Template - Classic</title>
<style type="text/css">
a:hover { text-decoration: underline !important; }

</style>
</head>

<body marginheight="0" topmargin="0" marginwidth="0" style="background:url(clipboard3.png); background-repeat: no-repeat; height:100px; width: 684px;">
<!--100% body table-->
<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#ffffff" style="margin: 0px auto";>
 <tr>
   <td align="center">
  <!--top links-->
  <table  width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center";>
  <tr>
      <td valign="middle" align="center" height="45">
      <p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">
      Is this email not displaying correctly? <webversion style="color: #c88b04; text-decoration: none;" href="#">Try the web version.</webversion></p></td>
  </tr>
 </table>
 <!--header-->
 <table style="background-color: #fffdf9;" width="684" border="0" align="center" cellpadding="0" cellspacing="0" >
 <tr>
  <td>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td valign="top" width="173">
      <!--ribbon-->
      <table border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td height="120" width="45"></td>
        <td background="#c88b04" valign="top" bgcolor="" height="120" width="80"><img src="dateRibbon2.png" width="81" height="121">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td valign="bottom" align="center" height="35">
      <p style="font-size: 14px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px;">ISSUE</p>
      </td>
  </tr>
  <tr>
      <td valign="top" align="center">
      <p style="font-size: 36px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px; text-shadow: 1px 1px 1px #333;">31</p>
      </td>
  </tr>
  </table>
      </td>
  </tr>
  </table><!--ribbon-->
      </td>
      <td valign="middle" width="493"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <td height="60">

              </td>
          </tr>
          <tr>
              <td>
              <h1 style="color: #333; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: 48px; font-family: Georgia, 'Times New Roman', Times, serif">FirstPoint USA <em>Newsletter</em></h1>
              </td>
              <td><img src="FPFinger.png" width="102" height="186"></td>
          </tr>
          <tr>
              <td height="40">
              </td>
          </tr>
      </table>
      <!--date-->
      <table border="0" cellspacing="0" cellpadding="0">
     </table>

      </td>
    </tr>
    </table><!--/date-->
      </td>
      <td width="18"></td>
      </tr>
   </table>
   </td>
   </tr>
  </table><!--/header-->
  <!--email container-->
  <table bgcolor="#fffdf9" cellspacing="0" border="0" align="center" cellpadding="30" width="684">
  <tr>
  <td >
  <!--email content-->
  <table cellspacing="0" border="0" id="email-content" cellpadding="0" width="624">
  <tr>
  <td>
  <!--section 1-->
  <table cellspacing="0" border="0" cellpadding="0" width="100%">
  <tr>
  <td valign="top" align="center">

  <img src="images/img1.jpg" alt="image dsc" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="622" />
  <!--line break-->
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td valign="bottom" height="50"><img src="lineBreak.png" width="600" height="1"></td>
  </tr>
  </table><!--/line break-->
  <h1 style="font-size: 36px; font-weight: normal; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; margin-top: 0px; margin-bottom: 20px;">Lorem ipsum <em>dolor sit amet</em></h1>
  <p style="font-size: 16px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. <a style="color: #bc1f31; text-decoration: none;" href="#">Phasellus</a> a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. <a style="color: #bc1f31; text-decoration: none;" href="#">Aliquam dolor dolor</a>, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et.</p>
  </td>
   </tr>
  </table><!--/section 1-->
  <!--line break-->
  <table cellspacing="0" border="0" cellpadding="0" width="100%">
  <tr>
  <td height="72"><img src="lineBreak.png" width="600" height="1"></td>
  </tr>
 </table><!--/line break-->
  <!--section 2-->
  <table cellspacing="0" border="0" cellpadding="0" width="100%">
   <tr>
  <td>
  <table cellspacing="0" border="0" cellpadding="8" width="100%" style="margin-top: 10px;">
    <tr>
  <td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img2.jpg" height="108" alt="img2" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
  <p style="color: #333333; font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
  <p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
   </td>

  <td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img3.jpg" height="108" alt="img3" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
   <p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
  <p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
  </td>

  <td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img4.jpg" height="108" alt="img4" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
   <p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
   <p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
  </td>

  <td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="images/img5.jpg" height="108" alt="img5" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138" /></p>
   <p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
  <p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
    </td>
    </tr>
   </table>
   </td>
   </tr>
   </table><!--/section 2-->
  <!--section 3-->
  <table cellspacing="0" border="0" cellpadding="0" width="100%">
  <tr>
  <td>
 <!--line break--><!--/line break--><!--line break--><!--/line break-->
 <table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
</tr>
 </table>
  <!--line break--><!--/line break--><!--line break--><!--/line break-->
  </td>
 </tr>
 </table><!--/section 3-->
  </td>
  </tr>
 </table><!--/email content-->
  </td>
  </tr>
 </table><!--/email container-->
 <!--footer-->
  <table width="600" border="0" align="center" cellpadding="30" cellspacing="0">
  <tr>
  <td valign="top">
  <p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">
  You’re receiving this newsletter because you’ve subscribed to our newsletter<br> 
  Not interested anymore? <unsubscribe style="color: #bc1f31; text-decoration: none;" href="#">Unsubscribe instantly.</unsubscribe></p>
  </td>
  <td valign="top"><p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">145 North Street, Glasgow, G*****</p></td>
   </tr>
   <tr>
  <td height="30"></td>
  <td height="30"></td>
  </tr>
  </table><!--/footer-->
  </td>
  </tr>
  </table><!--/100% body table-->
  </body>
  </html>
4

1 回答 1

0

与其尝试将单元格放在背景之上,不如将背景图像定义为一个单元格。您可能必须将其分成几个单元格以适应您的布局,但是在 Photoshop 中进行一些切片应该会使其变得非常容易。

于 2012-08-14T14:38:08.400 回答