一段时间以来,我一直在开发此简单的HTML代码,以将其用作我的签名电子邮件。最近,我添加了.gif照片和链接,以使其看起来更好。我不能将Instagram图标和WhatsApp图标并排放置,我已经在互联网上尝试了很多东西,但是没有成功。
这是我的HTML签名的代码。
this is a screenshot of my signature
<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">
<tbody><tr>
<td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle"><a href="https://beattor.com.br/"><img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block"></a></td>
<td style="vertical-align: middle; padding-left: 10px;">
<table cellspacing="0" cellpadding="1" border="0">
<tbody><tr>
<td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">
<font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">
<font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Site: <a href="https://beattor.com.br/" style="color: #06c">beattor.com.br</a></font></td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Email: <a href="mailto:[email protected]" style="color: #06c">[email protected]</a></font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato: <font style="color: #333333; font-size: 10pt; font-family: Verdana"><a href="tel:21964079707" style="color: #06c">(21) 96407-9707</a></font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana"> <font style="color: #333333; font-size: 10pt; font-family: Verdana"></font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><a href="https://www.instagram.com/abeattor/"><img id="InstagramLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Instagram-Logo-Beattor-Comunicacao.png" height="30px" walt="Instagram da Beattor" style="display: block"></a>
</td>
</tr>
<tr>
<td style=" font-family: Verdana; font-size: 10pt;"><a href="https://api.whatsapp.com/send?phone=5521964079707&text=Ol%C3%A1,%20tudo%20bem%3F%20Eu%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20sobre%20a%20Beattor%20Comunicacao"><img id="WhatsApp Logo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/WhatsApp-Logo-Beattor-Comunicacao.png" height="30px" walt="WhatsApp da Beattor" style="display: block"></a>
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
[如果您希望两个社交图标都在同一行上,那么一种方法是首先删除它们之间的结束行</tr>
/在它们之间打开新行<tr>
(我已在代码段中完成了此操作。然后,将您的图标浮动到社交图标tds中(使用字体大小和字体将float:left;
添加到您的样式中),然后您应该可以使用了。我在whatsapp中添加了一个小空白(10px)在它们之间留出很小的空间。我还从instagram中删除了100px的填充。
希望这会有所帮助!
<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">
<tbody>
<tr>
<td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle">
<a href="https://beattor.com.br/"><img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block"></a>
</td>
<td style="vertical-align: middle; padding-left: 10px;">
<table cellspacing="0" cellpadding="1" border="0">
<tbody>
<tr>
<td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">
<font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">
<font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Site: <a href="https://beattor.com.br/" style="color: #06c">beattor.com.br</a></font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Email: <a href="mailto:[email protected]" style="color: #06c">[email protected]</a></font>
</td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato:
<font style="color: #333333; font-size: 10pt; font-family: Verdana"><a href="tel:21964079707" style="color: #06c">(21) 96407-9707</a></font>
</td>
</tr>
<tr>
<td style="padding-right: 50px; font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">
<font style="color: #333333; font-size: 10pt; font-family: Verdana"></font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; float:left; font-size: 10pt;">
<a href="https://www.instagram.com/abeattor/"><img id="InstagramLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Instagram-Logo-Beattor-Comunicacao.png" height="30px" walt="Instagram da Beattor" style="display:block; "></a>
</td>
<td style="font-family: Verdana; margin-left:10px; float:left; font-size: 10pt;">
<a href="https://api.whatsapp.com/send?phone=5521964079707&text=Ol%C3%A1,%20tudo%20bem%3F%20Eu%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20sobre%20a%20Beattor%20Comunicacao"><img id="WhatsApp Logo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/WhatsApp-Logo-Beattor-Comunicacao.png" height="30px" walt="WhatsApp da Beattor" style="display:block;"></a>
</td>
</tr>
</tr>
</tr>
</tbody>
</table>