电子邮件模板设计

时间:2016-04-25 07:52:41

标签: html5 css3 html-table

我正在使用电子邮件模板设计。我的问题是,如果你看到设计有一个元素与" P" ,上面和下面有垂直的黑线" P",但是问题是这条线没有与其他" P"线。白色背景部分的内容是动态的,所以我无法修复高度。

我的问题是如何克服这个问题。

请帮帮我。在此先感谢。

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 23</h1>
</td>
</tr>
</tbody>
</table>
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" colspan="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background-color:#E7EBED;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<table width="600" cellspacing="0" cellpadding="0" border="0" colspan="0" align="left" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px;  background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 4%;">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong>  </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px;  background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong>  </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>           
</tbody>
</table>    
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; margin-bottom:2px; font-weight:normal;">September 24</h1>
</td>
</tr>
</tbody>
</table>
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 25</h1>
</td>
</tr>
</tbody>
</table>

2 个答案:

答案 0 :(得分:0)

设置属性以设置顶部和底部边框的样式。你可以使用下面的风格...希望它是你想要的。

.className {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

答案 1 :(得分:0)

Does height and width not apply to span?

发现这个,尝试使用div而不是跨度,跨度不能保持宽度和高度,如果使用div更好,div可以保持高度,你可以使它占据整个空间,使其看起来连接,问候