Question

我正在处理html电子邮件，其中使用html和嵌入式样式复制了设计。

在前景中，我看到以下设计：

在小提琴中进行设计：

为此我附上了所有的html和内联样式的fiddle。 在fiddle中，与上面的设计（Outlook）相比，我得到了不同的设计。

问题陈述：

我想知道我应该对小提琴的内联样式进行哪些更改，以使小提琴和上面的屏幕快照（外观）中的设计看起来相同。

与小提琴中的设计相比，Outlook屏幕快照中文本赚钱的步骤下方的空间太大。我在该部分中使用的代码段是：

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
         <tr>
            <td>
               <h2 style="text-align: left;
                  padding-left: 19%;
                  color: #484848;
                  padding-top: 2.5%;
                  padding-bottom: 5%;
                  padding-right: 12%;">steps to earn your money:</h2>
            </td>
         </tr>
         <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
               1. click here to open the XYZ app to the posting requests page<br><br>
               2. click on availability check request<br><br>
               3. say yes, its availabile ot suggest another date it is<br><br>
               4. wait the 1 or 24 hour confirmation good<br><br>
               5. three days after the booking ends money will be send to your account<br><br>
            </td>
         </tr>
      </table>

Answer 1

对您的代码进行了快速检查，这是我发现的内容：

您在第17行和第18行交换了td和tr（就像上面提到的Jason一样）
您正在使用填充百分比（固定的第55行）。这不是一个好主意，请放心使用，以免引起麻烦。在其他地方也要更改为像素。

<html>
<body>


 
  <table cellpadding="0" cellspacing="0" border="0" width="800" class="mobile"  align="center">

		 <tr>
		 <td>
		 <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td style="padding-left:6%;padding-bottom:5%;font-size:20px;color:#55BEC7;"> hi ABC,</td>
            
          </tr>
         
        </table>
</td>
		</tr>
		
	<tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px;padding-left:5%;">
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">type:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">what</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">how many</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">when:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">Mar 28/18 @ 7:00pm to <br> Mar 30/18 @ 7:00pm</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">who:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
          <tr>
            <td>
              <h2 style="text-align: left;
    padding-left: 20px;
    color: #484848;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;">steps to earn your money:</h2>
            </td>
          </tr>
          <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
                 1. click here to open the XYZ app to the posting requests page<br><br>
                 2. click on availability check request<br><br>
                 3. say yes, its availabile ot suggest another date it is<br><br>
                 4. wait the 1 or 24 hour confirmation good<br><br>
                 5. three days after the booking ends money will be send to your account<br><br>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

希望这会有所帮助。

与其他电子邮件客户端相比，电子邮件设计在外观上看起来有所不同

1 个答案: