html 自适应邮件模板

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 自适应邮件模板相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adaptive email</title>
</head>
<body style="margin:0px;padding:0px;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-colapse: colapse;">
        <tr>
            <td align="center">
                <!--[if (gte mso 9)|IE]>
                <table width="600" align="center">
                    <tr>
                        <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin:0px;">
                <![endif]-->
                <table align="center" border="0" cellspacing="0" cellpadding="0" style="border-colpase:colpase; width: 100%; max-width: 600px;">
                    <tr>
                        <td style="padding-top:20px; padding-bottom: 20px; padding-right: 30px; padding-left: 30px;
                        text-align: center; font-family: Arial, Verdana, sans-serif;line-height:32px; color:#222222;">
                            Title adaptive email
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="http://image.sendsay.ru/image/letter/examples/skolko-stoit-internet-magazin.jpg" width="600px" alt="" style="width: 100%;max-width:600px;height:auto;">
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:0px;padding-bottom:20px;padding-right:0;padding-left:0;text-align:center;" >
                           <!--[if (gte mso 9)|(IE)]>
                           <table width="100%">
                           <tr>
                           <td width="50%" valign="top" >
                           <![endif]-->
                            <div class="column" style="width:100%;max-width:290px;display:inline-block;vertical-align:top;" >
                                 <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;" >
                                     <tr>
                                       <td align="center" style="padding-top:10px;padding-bottom:5px;padding-right:5px;padding-left:5px;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size:15px; line-height:18px; color:#222222;">
                                           1 adaptive column
                                       </td>
                                     </tr>
                                 </table>
                             </div>
                           <!--[if (gte mso 9)|(IE)]>
                           </td><td width="50%" valign="top" >
                           <![endif]-->
                            <div class="column" style="width:100%;max-width:290px;display:inline-block;vertical-align:top;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;" >
                                    <tr>
                                        <td align="center" style="padding-top:10px;padding-bottom:5px;padding-right:5px;padding-left:5px;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size:15px; line-height:18px; color:#222222;">
                                            2 adaptive column
                                        </td>
                                    </tr>
                                </table>
                            </div>
                           <!--[if (gte mso 9)|(IE)]>
                           </td>
                           </tr>
                           </table>
                           <![endif]-->
                       </td>
                   </tr>
                </table>
                <!--[if (gte mso 9)|IE]>
                        </td>
                    </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
    </table>
</body>
</html>

以上是关于html 自适应邮件模板的主要内容,如果未能解决你的问题,请参考以下文章

springboot自定义文本/附件/html模板邮件发送

HTML5自适应通用型多功能后台管理系统

html百分比布局缩放自适应

苹果cms V10模板 自适应黄白模板

html5/css3响应式页面开发总结

BOOKSTORE OPENCART 自适应主题模板 ABC-0109