1. 程式人生 > >HTML email

HTML email

HTML郵件

規則: 必須使用table佈局,必須使用內聯樣式,不要使用margin與padding,定位,等。

案例:

案例圖片

設計:
這裡你可以將圖片分為3行,然後給有內容的部分,td設定vertical-align=top,即可快速的進行佈局

程式碼:

 <table cellpadding="0" cellspacing="0"  border="0" align="center" style="background:url(./img/2-2.jpg) no-repeat;height: 182px;" width="381">
       <tr style="height:14px;"><td rowspan="5" width="18"></td><td width="165"></td><td  width="198"></td></tr>
       <tr style="height: 39px;">
           <td rowspan="3"><a href="#"><img src="./img/long_img.jpg" style="height:150px;width:150px; display: block; border:0;"/></a></td>
        <td><span style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333">iiutec R-Cruiser Ultra Slim Vacuum Cleaner Household Cleaning...</span>
        </td>
      </tr>
       <tr style="height: 42px"><td></td></tr>
       <tr style="height: 70px">
           <td><span class="old_price" style="font-family:宋體; font-size:14px; color:#666666">$87.1</span><span class="new_price" style="font-family:Arial, Helvetica, sans-serif;font-weight:bold; font-size:18px; color:#ff6600">$69.63</span></td></tr>
       <tr style="height: 15px;">
           <td></td><td></td>
       </tr>
    </table>```