尝试制作 e-mail 签名。差不多完成了，定位和尺寸问题

Question

我正在尝试完成 e-mail 签名。我有两个问题： 1.It太大了！ 2.The 文本聚集在它上面而不是上面（可能与 'absolute' 定位有关）。请参阅随附的屏幕截图。

如何重新调整整个 body 的大小，使其看起来小 5-10 倍？我应该怎么做，才能让 e-mail 中的文字位于签名上方，而不是签名旁边？

<html>
<head>
<title>sig-noborders</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:absolute; left:0px; top:0px; width:1312px; height:612px;">
 <div style="background-image:url(sig-noborders_01.png); position:absolute; left:0px; top:0px; width:1312px; height:126px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_02.png); position:absolute; left:0px; top:126px; width:146px; height:486px;" title="">
 </div>
 <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_03.png~original); position:absolute; left:146px; top:126px; width:374px; height:370px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_04.png); position:absolute; left:520px; top:126px; width:160px; height:255px;" title="">
 </div>
 <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand">
  <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_05.png~original); position:absolute; left:680px; top:126px; width:31px; height:30px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_06.png); position:absolute; left:711px; top:126px; width:601px; height:3px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_07.png); position:absolute; left:711px; top:129px; width:59px; height:252px;" title="">
 </div>
 <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand">
  <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_08.png~original); position:absolute; left:770px; top:129px; width:352px; height:25px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_09.png); position:absolute; left:1122px; top:129px; width:190px; height:167px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_10.png); position:absolute; left:770px; top:154px; width:352px; height:58px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_11.png); position:absolute; left:680px; top:156px; width:31px; height:53px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_12.png); position:absolute; left:680px; top:209px; width:2px; height:84px;" title="">
 </div>
 <a href="http://designtel.co" target="_blank" style="cursor:hand">
  <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_13.png~original); position:absolute; left:682px; top:209px; width:27px; height:29px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_14.png); position:absolute; left:709px; top:209px; width:2px; height:84px;" title="">
 </div>
 <a href="http://designtel.co" target="_blank" style="cursor:hand">
  <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_15.png~original); position:absolute; left:770px; top:212px; width:220px; height:25px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_16.png); position:absolute; left:990px; top:212px; width:132px; height:84px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_17.png); position:absolute; left:770px; top:237px; width:220px; height:59px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_18.png); position:absolute; left:682px; top:238px; width:27px; height:55px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_19.png); position:absolute; left:680px; top:293px; width:1px; height:88px;" title="">
 </div>
 <a href="https://www.instagram.com/benjaminjayshand/" target="_blank" style="cursor:hand">
  <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_20.png~original); position:absolute; left:681px; top:293px; width:30px; height:31px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_21.png); position:absolute; left:770px; top:296px; width:3px; height:86px;" title="">
 </div>
 <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand">
  <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_22.png~original); position:absolute; left:773px; top:296px; width:236px; height:25px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_23.png); position:absolute; left:1009px; top:296px; width:33px; height:5px;" title="">
 </div>
 <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand">
  <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_24.png~original); position:absolute; left:1042px; top:296px; width:127px; height:25px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_25.png); position:absolute; left:1169px; top:296px; width:143px; height:316px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_26.png); position:absolute; left:1009px; top:301px; width:9px; height:81px;" title="">
 </div>
 <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_27.png~original); position:absolute; left:1018px; top:301px; width:13px; height:14px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_28.png); position:absolute; left:1031px; top:301px; width:11px; height:81px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_29.png); position:absolute; left:1018px; top:315px; width:13px; height:67px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_30.png); position:absolute; left:773px; top:321px; width:236px; height:61px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_31.png); position:absolute; left:1042px; top:321px; width:127px; height:61px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_32.png); position:absolute; left:681px; top:324px; width:30px; height:57px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_33.png); position:absolute; left:520px; top:381px; width:159px; height:231px;" title="">
 </div>
 <a href="mailto:info@benjaminjayshand.com">
     <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_34.png~original); position:absolute; left:679px; top:381px; width:33px; height:27px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_35.png); position:absolute; left:712px; top:381px; width:58px; height:1px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_36.png); position:absolute; left:712px; top:382px; width:57px; height:89px;" title="">
 </div>
 <a href="mailto:info@benjaminjayshand.com">
     <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_37.png~original); position:absolute; left:769px; top:382px; width:340px; height:25px;" title="">
  </div></a>
 <div style="background-image:url(sig-noborders_38.png); position:absolute; left:1109px; top:382px; width:60px; height:230px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_39.png); position:absolute; left:769px; top:407px; width:340px; height:62px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_40.png); position:absolute; left:679px; top:408px; width:33px; height:63px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_41.png); position:absolute; left:769px; top:469px; width:1px; height:143px;" title="">
 </div>
 <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_42.png~original); position:absolute; left:770px; top:469px; width:156px; height:19px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_43.png); position:absolute; left:926px; top:469px; width:183px; height:143px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_44.png); position:absolute; left:679px; top:471px; width:1px; height:9px;" title="">
 </div>
 <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_45.png~original); position:absolute; left:680px; top:471px; width:33px; height:8px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_46.png); position:absolute; left:713px; top:471px; width:56px; height:141px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_47.png); position:absolute; left:680px; top:479px; width:33px; height:1px;" title="">
 </div>
 <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_48.png~original); position:absolute; left:679px; top:480px; width:11px; height:6px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_49.png); position:absolute; left:690px; top:480px; width:12px; height:132px;" title="">
 </div>
 <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_50.png~original); position:absolute; left:702px; top:480px; width:11px; height:6px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_51.png); position:absolute; left:679px; top:486px; width:11px; height:126px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_52.png); position:absolute; left:702px; top:486px; width:11px; height:126px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_53.png); position:absolute; left:770px; top:488px; width:156px; height:124px;" title="">
 </div>
 <div style="background-image:url(sig-noborders_54.png); position:absolute; left:146px; top:496px; width:374px; height:116px;" title="">
 </div>
</div>
</body>
</html>

Answer 1

如果您打算在电子邮件中使用它，您将遇到跨电子邮件客户端兼容性的大量问题。

一些好的读物是：https://litmus.com/blog/the-tyranny-of-tables-why-web-and-email-design-are-so-different

我建议你花点时间弄清楚如何最好地使用 tables 制作电子邮件签名，尽管我讨厌它们的定位等，并希望电子邮件客户采用网络标准，他们只是不是那种:(

CSS 电子邮件客户端支持指南：https://www.campaignmonitor.com/css/

像这样使用 table：

<table width="600" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td width="295">
      benjamin <br/>
      jayshand
    </td>
    <td width="10">&nbsp;</td>
    <td width="295">
      <ul>
        <li>Right One</li>
        <li>Right Two</li>
        <li>Right Three</li>
        <li>Right Five</li>
        <li>Right Five</li>
      </ul>
    </td>
  </tr>
</table>

然后只需使用内联样式来设置您想要的样式。

尝试制作 e-mail 签名。差不多完成了，定位和尺寸问题

Trying to make an e-mail signature. Almost done, positioning and size problems

html

signature