0

我正在做我的第一个电子邮件模板，我有一个问题。在电子邮件模板的正文中，有一个带有图像和描述（交易）的部分。我希望能够复制此代码以进行尽可能多的交易，而不会弄乱框架设计。当我在 Photoshop 中进行设计时，我做了 2 笔交易。但是当我复制并粘贴相同的代码来制作第三个代码时，我会破坏设计。我知道这与我使用的框架的高度有关，但我无法解决这个问题。Photoshop 使用带有附加代码的 spacer.gif 生成了一些空格（在 html 代码的末尾）。如果我删除该设计将分崩离析。我能做些什么？

谢谢，

胡安。

这是html代码的示例：

<html>
<head>
<title>email</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="680" height="900" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
        <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>

    </tr>
    <tr>
      <td width="212" height="89" colspan="2" bgcolor="#32322b">
          <img src="images/logo.png" width="212" height="89" alt="" /></td>
        <td width="370" height="89" bgcolor="#32322b" style="font-family:Arial, Helvetica, sans-serif; font-size:14pt; color:#FFFFFF; vertical-align:middle; font-weight: bold; text-align: center;" >Deals</td>
        <td width="72" height="89" colspan="2" bgcolor="#32322b">
      <img src="images/cupon.png" width="72" height="89" alt="" /></td>

    </tr>
    <tr>
        <td width="12" height="590" rowspan="5">&nbsp;</td>
        <td width="630" height="17" colspan="3">&nbsp;</td>
        <td width="12" height="590" rowspan="5">&nbsp;</td>

    </tr>
    <tr>
        <td width="630" height="130" colspan="3">
        <img src="images/Template-Email-kuponkis_10.jpg" width="630" height="130" alt="" /></td>

    </tr>
    <tr>
        <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
        <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
        <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

    </tr>
    <tr>
        <td width="630" height="130" colspan="3">
        <img src="images/Template-Email-kuponkis_12.jpg" width="630" height="130" alt="" /></td>

    </tr>
    <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
        <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
        <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>


    </tr>
    <tr>
        <td width="654" height="15" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="654" height="44" colspan="5" bgcolor="#9ba9ce" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:center; vertical-align:middle;">¿Tiene dudas? Preguntas Frecuentes</td>

    </tr>
    <tr>
        <td width="654" height="144" colspan="5" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000; text-align: justify; vertical-align:top;"><p>&nbsp;</p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun. nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun</p></td>

    </tr>
    <tr>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="13" height="1"></td>
        <td width="12" height="1"></td>
        <td width="200" height="1"></td>
        <td width="370" height="1"></td>
        <td width="60" height="1"></td>
        <td width="12" height="1"></td>
        <td width="13" height="1"></td>
        <td width="1" height="1"></td>
    </tr>
</table>
</body>
</html>
4

1 回答 1

0

您实际上遇到的问题来自您正在使用的行跨度属性。

<tr>
    <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>
    <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
    <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>

</tr>

和

<tr>
    <td width="12" height="590" rowspan="5">&nbsp;</td>
    <td width="630" height="17" colspan="3">&nbsp;</td>
    <td width="12" height="590" rowspan="5">&nbsp;</td>

</tr>

两者都在电子邮件中间的任一侧创建空间，一列蓝色和一列白色，分别为 11 行和 5 行。

您列出的每个交易都是表格的两行，因此当您插入新交易时，您会在表格中再添加两行。您希望这两行在它们周围具有相同的颜色和间距，因此您需要告诉颜色间距行进一步扩展。

<tr>
    <td width="13" height="900" rowspan="13" bgcolor="#3b64aa">&nbsp;</td>
    <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
    <td width="13" height="900" rowspan="13" bgcolor="#3b64aa">&nbsp;</td>

</tr>

和

<tr>
    <td width="12" height="590" rowspan="7">&nbsp;</td>
    <td width="630" height="17" colspan="3">&nbsp;</td>
    <td width="12" height="590" rowspan="7">&nbsp;</td>

</tr>

对于您添加或删除的每个交易，将 rowspan 属性的值增加或减少 2。

如果您愿意，您可以避免每次都更改行跨度，方法是将交易放在他们自己的表中，在较大表的单行中。像这样：

<html>
<head>
<title>email</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td width="13" height="900" rowspan="8" bgcolor="#3b64aa">&nbsp;</td>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
        <td width="13" height="900" rowspan="8" bgcolor="#3b64aa">&nbsp;</td>

    </tr>
    <tr>
      <td width="212" height="89" colspan="2" bgcolor="#32322b">
          <img src="images/logo.png" width="212" height="89" alt="" /></td>
        <td width="370" height="89" bgcolor="#32322b" style="font-family:Arial, Helvetica, sans-serif; font-size:14pt; color:#FFFFFF; vertical-align:middle; font-weight: bold; text-align: center;" >Deals</td>
        <td width="72" height="89" colspan="2" bgcolor="#32322b">
      <img src="images/cupon.png" width="72" height="89" alt="" /></td>

    </tr>
    <tr>
        <td width="12" height="590" rowspan="2">&nbsp;</td>
        <td width="630" height="17" colspan="3">&nbsp;</td>
        <td width="12" height="590" rowspan="2">&nbsp;</td>

    </tr>

    <tr> 
    <td colspan="3">
    <table border="0" align="center" cellpadding="0" cellspacing="0">

        <tr>
             <td width="630" height="130" colspan="3">
            <img src ="images/Template-Email-kuponkis_10.jpg" width="630" height="130" alt="" /></td>

        </tr>
        <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
            <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
            <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
            <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

        </tr>
        <tr>
            <td width="630" height="130" colspan="3">
            <img src="images/Template-Email-kuponkis_12.jpg" width="630" height="130" alt="" /></td>

        </tr>
        <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
            <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
            <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
            <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

        </tr>

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

    <tr>
        <td width="654" height="15" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="654" height="44" colspan="5" bgcolor="#9ba9ce" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:center; vertical-align:middle;">¿Tiene dudas? Preguntas Frecuentes</td>

    </tr>
    <tr>
        <td width="654" height="144" colspan="5" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000; text-align: justify; vertical-align:top;"><p>&nbsp;</p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun. nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun</p></td>

    </tr>
    <tr>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="13" height="1"></td>
        <td width="12" height="1"></td>
        <td width="200" height="1"></td>
        <td width="370" height="1"></td>
        <td width="60" height="1"></td>
        <td width="12" height="1"></td>
        <td width="13" height="1"></td>
        <td width="1" height="1"></td>
    </tr>
</table>
</body>
</html>

这样，您可以在不更改行跨度的情况下随意复制交易，因为就封闭表而言，它们都只有一行高。

于 2013-03-17T01:56:36.740 回答