search

xgqfrms / FEIQA

FEIQA: Front End Interviews Question & Answers
https://feiqa.xgqfrms.xyz
MIT License
7 stars 0 forks source link

email & html template #59

Open xgqfrms opened 6 years ago

xgqfrms commented 6 years ago

email & html template

https://www.cnblogs.com/xgqfrms/p/9877194.html

table & css

https://css-tricks.com/complete-guide-table-element/

https://css-tricks.com/accessible-simple-responsive-tables/

https://css-tricks.com/almanac/properties/t/table-layout/

xgqfrms commented 6 years ago

how to email client render email page?

https://stackoverflow.com/questions/1018078/testing-html-email-rendering

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://www.templatemonster.com/blog/render-emails-perfectly-different-email-clients/

https://litmus.com/blog/why-do-email-clients-render-emails-differently

https://mailchimp.com/resources/why-clients-render-email-differently/

https://mailtrap.io/blog/2018-08-30-building-email-template

xgqfrms commented 6 years ago

Email Client Market Share

https://emailclientmarketshare.com/

image

xgqfrms commented 6 years ago

https://www.cnblogs.com/xgqfrms/p/9877194.html

image

xgqfrms commented 6 years ago

Github & Halloween

image

xgqfrms commented 6 years ago

https://mailtrap.io/blog/2018-08-30-building-email-template

image

demo

image

xgqfrms commented 6 years ago

https://mailchimp.com/help/test-with-inbox-preview/

xgqfrms commented 6 years ago

https://login.mailchimp.com/signup/

password

image

xgqfrms commented 6 years ago

email testing

https://stackoverflow.com/questions/1018078/testing-html-email-rendering

Litmus https://litmusapp.com/

MailChimp https://www.mailchimp.com/

CampaignMonitor https://www.campaignmonitor.com/

Testi@ https://testi.at/

https://putsmail.com/

https://www.emailonacid.com

xgqfrms commented 6 years ago

https://us19.admin.mailchimp.com/reports/summary?id=121879

https://mailchi.mp/a0a8d9ab3755/just-for-email-template-testing


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/">

<head>

    <meta property="og:title" content="😄 just for email template testing">
    <meta property="fb:page_id" content="43929265776">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="referrer" content="origin">
    <!-- NAME: START FROM SCRATCH -->
    <!--[if gte mso 15]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>😄 just for email template testing</title>

    <style type="text/css">
        p {
            margin: 10px 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            display: block;
            margin: 0;
            padding: 0;
        }

        img,
        a img {
            border: 0;
            height: auto;
            outline: none;
            text-decoration: none;
        }

        body,
        #bodyTable,
        #bodyCell {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .mcnPreviewText {
            display: none !important;
        }

        #outlook a {
            padding: 0;
        }

        img {
            -ms-interpolation-mode: bicubic;
        }

        table {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        .ReadMsgBody {
            width: 100%;
        }

        .ExternalClass {
            width: 100%;
        }

        p,
        a,
        li,
        td,
        blockquote {
            mso-line-height-rule: exactly;
        }

        a[href^=tel],
        a[href^=sms] {
            color: inherit;
            cursor: default;
            text-decoration: none;
        }

        p,
        a,
        li,
        td,
        body,
        table,
        blockquote {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass td,
        .ExternalClass div,
        .ExternalClass span,
        .ExternalClass font {
            line-height: 100%;
        }

        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        .templateContainer {
            max-width: 600px !important;
        }

        a.mcnButton {
            display: block;
        }

        .mcnImage,
        .mcnRetinaImage {
            vertical-align: bottom;
        }

        .mcnTextContent {
            word-break: break-word;
        }

        .mcnTextContent img {
            height: auto !important;
        }

        .mcnDividerBlock {
            table-layout: fixed !important;
        }

        h1 {
            color: #222222;
            font-family: Helvetica;
            font-size: 40px;
            font-style: normal;
            font-weight: bold;
            line-height: 150%;
            letter-spacing: normal;
            text-align: center;
        }

        h2 {
            color: #222222;
            font-family: Helvetica;
            font-size: 34px;
            font-style: normal;
            font-weight: bold;
            line-height: 150%;
            letter-spacing: normal;
            text-align: left;
        }

        h3 {
            color: #444444;
            font-family: Helvetica;
            font-size: 22px;
            font-style: normal;
            font-weight: bold;
            line-height: 150%;
            letter-spacing: normal;
            text-align: left;
        }

        h4 {
            color: #999999;
            font-family: Georgia;
            font-size: 20px;
            font-style: italic;
            font-weight: normal;
            line-height: 125%;
            letter-spacing: normal;
            text-align: left;
        }

        #templateHeader {
            background-color: #F2F2F2;
            background-image: none;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-top: 0;
            border-bottom: 0;
            padding-top: 45px;
            padding-bottom: 45px;
        }

        .headerContainer {
            background-color: transparent;
            background-image: none;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-top: 0;
            border-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .headerContainer .mcnTextContent,
        .headerContainer .mcnTextContent p {
            color: #808080;
            font-family: Helvetica;
            font-size: 16px;
            line-height: 150%;
            text-align: left;
        }

        .headerContainer .mcnTextContent a,
        .headerContainer .mcnTextContent p a {
            color: #00ADD8;
            font-weight: normal;
            text-decoration: underline;
        }

        #templateBody {
            background-color: #ffffff;
            background-image: none;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-top: 0;
            border-bottom: 0;
            padding-top: 36px;
            padding-bottom: 45px;
        }

        .bodyContainer {
            background-color: #transparent;
            background-image: none;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-top: 0;
            border-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .bodyContainer .mcnTextContent,
        .bodyContainer .mcnTextContent p {
            color: #808080;
            font-family: Helvetica;
            font-size: 16px;
            line-height: 150%;
            text-align: left;
        }

        .bodyContainer .mcnTextContent a,
        .bodyContainer .mcnTextContent p a {
            color: #00ADD8;
            font-weight: normal;
            text-decoration: underline;
        }

        #templateFooter {
            background-color: #F2F2F2;
            background-image: none;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-top: 0;
            border-bottom: 0;
            padding-top: 45px;
            padding-bottom: 63px;
        }

        .footerContainer {
            background-color: transparent;
            background-image: none;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-top: 0;
            border-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .footerContainer .mcnTextContent,
        .footerContainer .mcnTextContent p {
            color: #656565;
            font-family: Helvetica;
            font-size: 12px;
            line-height: 150%;
            text-align: center;
        }

        .footerContainer .mcnTextContent a,
        .footerContainer .mcnTextContent p a {
            color: #656565;
            font-weight: normal;
            text-decoration: underline;
        }

        @media only screen and (min-width:768px) {
            .templateContainer {
                width: 600px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            body,
            table,
            td,
            p,
            a,
            li,
            blockquote {
                -webkit-text-size-adjust: none !important;
            }
        }

        @media only screen and (max-width: 480px) {
            body {
                width: 100% !important;
                min-width: 100% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnRetinaImage {
                max-width: 100% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnImage {
                width: 100% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnCartContainer,
            .mcnCaptionTopContent,
            .mcnRecContentContainer,
            .mcnCaptionBottomContent,
            .mcnTextContentContainer,
            .mcnBoxedTextContentContainer,
            .mcnImageGroupContentContainer,
            .mcnCaptionLeftTextContentContainer,
            .mcnCaptionRightTextContentContainer,
            .mcnCaptionLeftImageContentContainer,
            .mcnCaptionRightImageContentContainer,
            .mcnImageCardLeftTextContentContainer,
            .mcnImageCardRightTextContentContainer,
            .mcnImageCardLeftImageContentContainer,
            .mcnImageCardRightImageContentContainer {
                max-width: 100% !important;
                width: 100% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnBoxedTextContentContainer {
                min-width: 100% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnImageGroupContent {
                padding: 9px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnCaptionLeftContentOuter .mcnTextContent,
            .mcnCaptionRightContentOuter .mcnTextContent {
                padding-top: 9px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnImageCardTopImageContent,
            .mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,
            .mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent {
                padding-top: 18px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnImageCardBottomImageContent {
                padding-bottom: 9px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnImageGroupBlockInner {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnImageGroupBlockOuter {
                padding-top: 9px !important;
                padding-bottom: 9px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnTextContent,
            .mcnBoxedTextContentColumn {
                padding-right: 18px !important;
                padding-left: 18px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnImageCardLeftImageContent,
            .mcnImageCardRightImageContent {
                padding-right: 18px !important;
                padding-bottom: 0 !important;
                padding-left: 18px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcpreview-image-uploader {
                display: none !important;
                width: 100% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            h1 {
                font-size: 30px !important;
                line-height: 125% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            h2 {
                font-size: 26px !important;
                line-height: 125% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            h3 {
                font-size: 20px !important;
                line-height: 150% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            h4 {
                font-size: 18px !important;
                line-height: 150% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnBoxedTextContentContainer .mcnTextContent,
            .mcnBoxedTextContentContainer .mcnTextContent p {
                font-size: 14px !important;
                line-height: 150% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .headerContainer .mcnTextContent,
            .headerContainer .mcnTextContent p {
                font-size: 16px !important;
                line-height: 150% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .bodyContainer .mcnTextContent,
            .bodyContainer .mcnTextContent p {
                font-size: 16px !important;
                line-height: 150% !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .footerContainer .mcnTextContent,
            .footerContainer .mcnTextContent p {
                font-size: 14px !important;
                line-height: 150% !important;
            }
        }
    </style>

    <body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
        <!---->
        <!--[if !gte mso 9]><!----><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">just for email template testing 😃</span>
        <!--<![endif]-->
        <!---->
        <center>
            <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;">
                <tr>
                    <td align="center" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;">
                        <!-- BEGIN TEMPLATE // -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <tr>
                                <td align="center" valign="top" id="templateHeader" data-template-container="" style="background:#F2F2F2 none no-repeat center/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F2F2F2;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 45px;padding-bottom: 45px;">
                                    <!--[if (gte mso 9)|(IE)]>
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
                                <tr>
                                    <td align="center" valign="top" width="600" style="width:600px;">
                            <![endif]-->
                                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;max-width: 600px !important;">
                                        <tr>
                                            <td valign="top" class="headerContainer" style="background:transparent none no-repeat center/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: transparent;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 0;padding-bottom: 0;">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                    <tbody class="mcnTextBlockOuter">
                                                        <tr>
                                                            <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                                <!--[if mso]>
                <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
                <tr>
                <![endif]-->

                                                                <!--[if mso]>
                <td valign="top" width="600" style="width:600px;">
                <![endif]-->
                                                                <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
                                                                    <tbody>
                                                                        <tr>

                                                                            <td valign="top" class="mcnTextContent" style="padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #808080;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;">

                                                                                <div style="text-align: center;"><strong>版本升级报告</strong></div>

                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <!--[if mso]>
                </td>
                <![endif]-->

                                                                <!--[if mso]>
                </tr>
                </table>
                <![endif]-->
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnDividerBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;">
                                                    <tbody class="mcnDividerBlockOuter">
                                                        <tr>
                                                            <td class="mcnDividerBlockInner" style="min-width: 100%;padding: 5px 18px 10px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                                <table class="mcnDividerContent" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-top: 1px solid #4CAAD8;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                                                <span></span>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <!--
                <td class="mcnDividerBlockInner" style="padding: 18px;">
                <hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
-->
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!--[if (gte mso 9)|(IE)]>
                            </td>
                            </tr>
                            </table>
                            <![endif]-->
                                </td>
                            </tr>
                            <tr>
                                <td align="center" valign="top" id="templateBody" data-template-container="" style="background:#ffffff none no-repeat center/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 36px;padding-bottom: 45px;">
                                    <!--[if (gte mso 9)|(IE)]>
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
                                <tr>
                                    <td align="center" valign="top" width="600" style="width:600px;">
                            <![endif]-->
                                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;max-width: 600px !important;">
                                        <tr>
                                            <td valign="top" class="bodyContainer" style="background:#transparent none no-repeat center/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #transparent;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 0;padding-bottom: 0;">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnBoxedTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                    <!--[if gte mso 9]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
    <![endif]-->
                                                    <tbody class="mcnBoxedTextBlockOuter">
                                                        <tr>
                                                            <td valign="top" class="mcnBoxedTextBlockInner" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                                                <!--[if gte mso 9]>
                <td align="center" valign="top" ">
                <![endif]-->
                                                                <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnBoxedTextContentContainer">
                                                                    <tbody>
                                                                        <tr>

                                                                            <td style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                                                                <table border="0" cellspacing="0" class="mcnTextContentContainer" width="100%" style="min-width: 100% !important;background-color: #404040;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                                                    <tbody>
                                                                                        <tr>
                                                                                            <td valign="top" class="mcnTextContent" style="padding: 18px;color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;line-height: 150%;">
                                                                                                xxxxxxx<br> yyyyyyy
                                                                                                <br> zzzzzz
                                                                                            </td>
                                                                                        </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <!--[if gte mso 9]>
                </td>
                <![endif]-->

                                                                <!--[if gte mso 9]>
                </tr>
                </table>
                <![endif]-->
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!--[if (gte mso 9)|(IE)]>
                            </td>
                            </tr>
                            </table>
                            <![endif]-->
                                </td>
                            </tr>
                            <tr>
                                <td align="center" valign="top" id="templateFooter" data-template-container="" style="background:#F2F2F2 none no-repeat center/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F2F2F2;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 45px;padding-bottom: 63px;">
                                    <!--[if (gte mso 9)|(IE)]>
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
                                <tr>
                                    <td align="center" valign="top" width="600" style="width:600px;">
                            <![endif]-->
                                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;max-width: 600px !important;">
                                        <tr>
                                            <td valign="top" class="footerContainer" style="background:transparent none no-repeat center/cover;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: transparent;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;border-top: 0;border-bottom: 0;padding-top: 0;padding-bottom: 0;">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                    <tbody class="mcnTextBlockOuter">
                                                        <tr>
                                                            <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                                <!--[if mso]>
                <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
                <tr>
                <![endif]-->

                                                                <!--[if mso]>
                <td valign="top" width="600" style="width:600px;">
                <![endif]-->
                                                                <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
                                                                    <tbody>
                                                                        <tr>

                                                                            <td valign="top" class="mcnTextContent" style="padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #656565;font-family: Helvetica;font-size: 12px;line-height: 150%;text-align: center;">

                                                                                <em>Copyright © 2018 xgqfrms, All rights reserved.</em><br>
                                                                                <br>
                                                                                <br> Want to change how you receive these emails?<br> You can <a href="https://xyz.us19.list-manage.com/profile?u=e77312b4b41f854c58353a14e&id=ef7199f0e7&e=[UNIQID]" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;">update your preferences</a>                                                                                or <a href="https://xyz.us19.list-manage.com/unsubscribe?u=e77312b4b41f854c58353a14e&id=ef7199f0e7&e=[UNIQID]&c=95766e4739" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;">unsubscribe from this list</a>.<br>
                                                                                <br>
                                                                                <a href="http://www.mailchimp.com/monkey-rewards/?utm_source=freemium_newsletter&utm_medium=email&utm_campaign=monkey_rewards&aid=e77312b4b41f854c58353a14e&afl=1"><img src="https://cdn-images.mailchimp.com/monkey_rewards/MC_MonkeyReward_15.png" border="0" alt="Email Marketing Powered by Mailchimp" title="Mailchimp Email Marketing" width="139"
                                                                                        height="54"></a>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <!--[if mso]>
                </td>
                <![endif]-->

                                                                <!--[if mso]>
                </tr>
                </table>
                <![endif]-->
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!--[if (gte mso 9)|(IE)]>
                            </td>
                            </tr>
                            </table>
                            <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!-- // END TEMPLATE -->
                    </td>
                </tr>
            </table>
        </center>
    </body>

</html>
xgqfrms commented 6 years ago

https://www.templatemonster.com/blog/render-emails-perfectly-different-email-clients/ https://mailtrap.io/blog/2018-08-30-building-email-template

image image image


<!DOCTYPE html>
<html lang="zh-Hans">

<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">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title></title>
</head>

<body>
    <section>
        <h1>
            <a href="https://feiqa.xgqfrms.xyz/index.html"></a>
        </h1>
    </section>
    <table cellspacing="0" cellpadding="0" width="660px" height="95px" style="border-width:0px;">
        <tbody>
            <tr style="width:660px;height:46px;">
                <td style="width:660px;height:46px;">
                    <table cellspacing="0" cellpadding="0" width="660px" height="46px" style="">
                        <tbody>
                            <tr style="width:660px;height:46px;">
                                <td style="border-width:0px;width:0px;height:0px;"></td>
                                <td style="border-width:0px;width:660px;height:0px;"><span id="loopHeader1"> <table cellspacing="0" cellpadding="0" width="660px" height="46px" background="https://pbdw.ebank.cmbchina.com/cbmresource/8/cemxzm/bg2.png" style="background-repeat:no-repeat;background-position:center;border-width:0px;"> <tbody> <tr style="width:660px;height:46px;"> <td style="width:660px;height:46px;"> <table cellspacing="0" cellpadding="0" width="660px" height="46px" style=""> <tbody> <tr style="width:660px;height:46px;"> <td style="border-width:0px;width:72px;height:0px;"></td> <td style="border-width:0px;width:588px;height:0px;"><span id="fixBand14"> <table cellspacing="0" cellpadding="0" width="516px" height="46px" style="border-left-style:solid;;border-right-style:solid;;border-top-style:solid;;border-bottom-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:516px;height:46px;"> <td style="width:516px;height:46px;"> <table cellspacing="0" cellpadding="0" width="516px" height="46px" style=""> <tbody> <tr style="width:516px;height:46px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:74px;height:0px;"><span id="fixBand15"> <table cellspacing="0" cellpadding="0" width="74px" height="46px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:74px;height:46px;"> <td style="width:74px;height:46px;"> <table cellspacing="0" cellpadding="0" width="74px" height="46px" style=""> <tbody> <tr style="width:74px;height:46px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:74px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;font-weight:bold;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">卡号末四位</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                                <td style="border-width:0px;width:72px;height:0px;"><span id="fixBand16"> <table cellspacing="0" cellpadding="0" width="72px" height="46px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:72px;height:46px;"> <td style="width:72px;height:46px;"> <table cellspacing="0" cellpadding="0" width="72px" height="46px" style=""> <tbody> <tr style="width:72px;height:46px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:72px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;font-weight:bold;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">交易日期</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                                <td style="border-width:0px;width:76px;height:0px;"><span id="fixBand17"> <table cellspacing="0" cellpadding="0" width="76px" height="46px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:76px;height:46px;"> <td style="width:76px;height:46px;"> <table cellspacing="0" cellpadding="0" width="76px" height="46px" style=""> <tbody> <tr style="width:76px;height:46px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:76px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;font-weight:bold;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">时间</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                                <td style="border-width:0px;width:76px;height:0px;"><span id="fixBand18"> <table cellspacing="0" cellpadding="0" width="76px" height="46px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:76px;height:46px;"> <td style="width:76px;height:46px;"> <table cellspacing="0" cellpadding="0" width="76px" height="46px" style=""> <tbody> <tr style="width:76px;height:46px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:76px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;font-weight:bold;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">币别</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                                <td style="border-width:0px;width:144px;height:0px;"><span id="fixBand19"> <table cellspacing="0" cellpadding="0" width="144px" height="46px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:144px;height:46px;"> <td style="width:144px;height:46px;"> <table cellspacing="0" cellpadding="0" width="144px" height="46px" style=""> <tbody> <tr style="width:144px;height:46px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:144px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;font-weight:bold;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">商户名称</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                                <td style="border-width:0px;width:76px;height:0px;"><span id="fixBand20"> <table cellspacing="0" cellpadding="0" width="76px" height="46px" style="border-width:0px;"> <tbody> <tr style="width:76px;height:46px;"> <td style="width:76px;height:46px;"> <table cellspacing="0" cellpadding="0" width="76px" height="46px" style=""> <tbody> <tr style="width:76px;height:46px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:76px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;font-weight:bold;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">交易金额</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    </span>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </span>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr style="width:660px;height:50px;">
        <td style="width:660px;height:50px;">
            <table cellspacing="0" cellpadding="0" width="660px" height="50px" style="">
                <tbody>
                    <tr style="width:660px;height:50px;">
                        <td style="border-width:0px;width:0px;height:0px;"></td>
                        <td style="border-width:0px;width:660px;height:0px;"><span id="fixBand27"> <table cellspacing="0" cellpadding="0" width="660px" height="49px" background="https://pbdw.ebank.cmbchina.com/cbmresource/8/cemxzm/bg2.png" style="background-repeat:no-repeat;background-position:center;border-width:0px;"> <tbody> <tr style="width:660px;height:50px;"> <td style="width:660px;height:50px;"> <table cellspacing="0" cellpadding="0" width="660px" height="50px" style=""> <tbody> <tr style="width:660px;height:50px;"> <td style="border-width:0px;width:72px;height:0px;"></td> <td style="border-width:0px;width:588px;height:0px;"><span id="fixBand28"> <table cellspacing="0" cellpadding="0" width="516px" height="49px" style="border-left-style:solid;;border-right-style:solid;;border-bottom-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:516px;height:67px;"> <td style="width:516px;height:67px;"> <table cellspacing="0" cellpadding="0" width="516px" height="67px" style=""> <tbody> <tr style="width:516px;height:67px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:74px;height:0px;"><span id="fixBand29"> <table cellspacing="0" cellpadding="0" width="74px" height="67px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:74px;height:67px;"> <td style="width:74px;height:67px;"> <table cellspacing="0" cellpadding="0" width="74px" height="67px" style=""> <tbody> <tr style="width:74px;height:67px;" class="firstRow"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:74px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">1234</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                        <td style="border-width:0px;width:72px;height:0px;"><span id="fixBand30"> <table cellspacing="0" cellpadding="0" width="72px" height="67px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:72px;height:67px;"> <td style="width:72px;height:67px;"> <table cellspacing="0" cellpadding="0" width="72px" height="67px" style=""> <tbody> <tr style="width:72px;height:67px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:72px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">20181030</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                        <td style="border-width:0px;width:76px;height:0px;"><span id="fixBand31"> <table cellspacing="0" cellpadding="0" width="76px" height="67px" style="border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:76px;height:67px;"> <td style="width:76px;height:67px;"> <table cellspacing="0" cellpadding="0" width="76px" height="67px" style=""> <tbody> <tr style="width:76px;height:67px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:76px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">08:23:27</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                        <td style="border-width:0px;width:76px;height:0px;"><span id="fixBand32"> <table cellspacing="0" cellpadding="0" width="76px" height="49px" style="border-width:0px;"> <tbody> <tr style="width:76px;height:50px;"> <td style="width:76px;height:50px;"> <table cellspacing="0" cellpadding="0" width="76px" height="50px" style=""> <tbody> <tr style="width:76px;height:50px;"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:76px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">人民币</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
                        <td style="border-width:0px;width:144px;height:0px;"><span id="fixBand33"> <table cellspacing="0" cellpadding="0" width="144px" height="67px" style="border-left-style:solid;;border-right-style:solid;;border-width:1px;border-color:#c0c0c0;"> <tbody> <tr style="width:144px;height:67px;"> <td style="width:144px;height:67px;"> <table cellspacing="0" cellpadding="0" width="144px" height="67px" style=""> <tbody> <tr style="width:144px;height:67px;" class="firstRow"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:144px;height:0px;"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">消费&nbsp;上海世纪联华</font><span style="font-size: 13px; line-height: 15.6px;">世纪联华</span>
                            <span style="font-size: 13px; line-height: 15.6px;">世纪联华</span><span style="font-size: 13px; line-height: 15.6px;">世纪联华</span><span style="font-size: 13px; line-height: 15.6px;">世纪联华</span>
                            <span style="font-size: 13px; line-height: 15.6px;">世纪联华</span>
                            <span style="font-size: 13px; line-height: 120%;">超市有限公&nbsp;-银联扫码</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
    </table>
    </span>
    </td>
    <td style="border-width:0px;width:76px;height:0px;"><span id="fixBand34"> <table cellspacing="0" cellpadding="0" width="76px" height="49px" style="border-width:0px;"> <tbody> <tr style="width:76px;height:50px;"> <td style="width:76px;height:50px;"> <table cellspacing="0" cellpadding="0" width="76px" height="50px" style=""> <tbody> <tr style="width:76px;height:50px;" class="firstRow"> <td style="border-width:0px;width:0px;height:0px;"></td> <td style="border-width:0px;width:76px;height:0px;" valign="middle"> <div style="word-break: break-all;text-align:center;color:#000000;line-height:110%;valign:middle;"> <font face="微软雅黑" style="font-size: 13px; line-height: 1.6;">20.11</font></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </span></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </span>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </span>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
</body>

</html>
xgqfrms commented 6 years ago

https://mailtrap.io/blogposts/building_email_template/email_table_structure.jpg