Как заставить HTML работать с электронными письмами, отправленными в outlook? - PullRequest
0 голосов
/ 07 февраля 2020

Я создаю программу, которая отправляет электронное письмо учащимся с номером подтверждения с использованием их идентификационного номера. Все наши электронные письма соответствуют одному и тому же шаблону id@whatever, и они получены из outlook, и они заблокировали gmail для наших электронных писем студентов.

В любом случае, я написал html письмо, и когда я отправляю его в gmail, все появляется. Когда я отправляю его на свой студенческий счет, чтобы проверить, что они увидят, я вижу только четверть того, что должно быть там.

Поэтому мой вопрос: есть ли способ, которым я могу изменить свой * 1023? * чтобы все отображалось в Outlook.

Как выглядит Gmail

Как выглядит Outlook (с выбранным «доверенным пользователем»)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body><div dir="ltr"><input name="cloudHQ__backup_css" type="hidden" value="       &amp;lt;style type=&quot;text/css&quot;&amp;gt;&#10;&#9;&#9;p{&#10;&#9;&#9;&#9;margin:10px 0;&#10;&#9;&#9;&#9;padding:0;&#10;&#9;&#9;}&#10;&#9;&#9;table{&#10;&#9;&#9;&#9;border-collapse:collapse;&#10;&#9;&#9;}&#10;&#9;&#9;h1,h2,h3,h4,h5,h6{&#10;&#9;&#9;&#9;display:block;&#10;&#9;&#9;&#9;margin:0;&#10;&#9;&#9;&#9;padding:0;&#10;&#9;&#9;}&#10;&#9;&#9;img,a img{&#10;&#9;&#9;&#9;border:0;&#10;&#9;&#9;&#9;height:auto;&#10;&#9;&#9;&#9;outline:none;&#10;&#9;&#9;&#9;text-decoration:none;&#10;&#9;&#9;}&#10;&#9;&#9;body,#bodyTable,#bodyCell{&#10;&#9;&#9;&#9;height:100%;&#10;&#9;&#9;&#9;margin:0;&#10;&#9;&#9;&#9;padding:0;&#10;&#9;&#9;&#9;width:100%;&#10;&#9;&#9;}&#10;&#9;&#9;.mcnPreviewText{&#10;&#9;&#9;&#9;display:none !important;&#10;&#9;&#9;}&#10;&#9;&#9;#outlook a{&#10;&#9;&#9;&#9;padding:0;&#10;&#9;&#9;}&#10;&#9;&#9;img{&#10;&#9;&#9;&#9;-ms-interpolation-mode:bicubic;&#10;&#9;&#9;}&#10;&#9;&#9;table{&#10;&#9;&#9;&#9;mso-table-lspace:0pt;&#10;&#9;&#9;&#9;mso-table-rspace:0pt;&#10;&#9;&#9;}&#10;&#9;&#9;.ReadMsgBody{&#10;&#9;&#9;&#9;width:100%;&#10;&#9;&#9;}&#10;&#9;&#9;.ExternalClass{&#10;&#9;&#9;&#9;width:100%;&#10;&#9;&#9;}&#10;&#9;&#9;p,a,li,td,blockquote{&#10;&#9;&#9;&#9;mso-line-height-rule:exactly;&#10;&#9;&#9;}&#10;&#9;&#9;a[href^=tel],a[href^=sms]{&#10;&#9;&#9;&#9;color:inherit;&#10;&#9;&#9;&#9;cursor:default;&#10;&#9;&#9;&#9;text-decoration:none;&#10;&#9;&#9;}&#10;&#9;&#9;p,a,li,td,body,table,blockquote{&#10;&#9;&#9;&#9;-ms-text-size-adjust:100%;&#10;&#9;&#9;&#9;-webkit-text-size-adjust:100%;&#10;&#9;&#9;}&#10;&#9;&#9;.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{&#10;&#9;&#9;&#9;line-height:100%;&#10;&#9;&#9;}&#10;&#9;&#9;a[x-apple-data-detectors]{&#10;&#9;&#9;&#9;color:inherit !important;&#10;&#9;&#9;&#9;text-decoration:none !important;&#10;&#9;&#9;&#9;font-size:inherit !important;&#10;&#9;&#9;&#9;font-family:inherit !important;&#10;&#9;&#9;&#9;font-weight:inherit !important;&#10;&#9;&#9;&#9;line-height:inherit !important;&#10;&#9;&#9;}&#10;&#9;&#9;#bodyCell{&#10;&#9;&#9;&#9;padding:10px;&#10;&#9;&#9;}&#10;&#9;&#9;.templateContainer{&#10;&#9;&#9;&#9;max-width:600px !important;&#10;&#9;&#9;}&#10;&#9;&#9;a.mcnButton{&#10;&#9;&#9;&#9;display:block;&#10;&#9;&#9;}&#10;&#9;&#9;.mcnImage,.mcnRetinaImage{&#10;&#9;&#9;&#9;vertical-align:bottom;&#10;&#9;&#9;}&#10;&#9;&#9;.mcnTextContent{&#10;&#9;&#9;&#9;word-break:break-word;&#10;&#9;&#9;}&#10;&#9;&#9;.mcnTextContent img{&#10;&#9;&#9;&#9;height:auto !important;&#10;&#9;&#9;}&#10;&#9;&#9;.mcnDividerBlock{&#10;&#9;&#9;&#9;table-layout:fixed !important;&#10;&#9;&#9;}&#10;&#9;&#9;body,#bodyTable{&#10;&#9;&#9;&#9;background-color:#ddf1f2;&#10;&#9;&#9;}&#10;&#9;&#9;#bodyCell{&#10;&#9;&#9;&#9;border-top:0;&#10;&#9;&#9;}&#10;&#9;&#9;.templateContainer{&#10;&#9;&#9;&#9;border:0;&#10;&#9;&#9;}&#10;&#9;&#9;h1{&#10;&#9;&#9;&#9;color:#202020;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:26px;&#10;&#9;&#9;&#9;font-style:normal;&#10;&#9;&#9;&#9;font-weight:bold;&#10;&#9;&#9;&#9;line-height:125%;&#10;&#9;&#9;&#9;letter-spacing:normal;&#10;&#9;&#9;&#9;text-align:left;&#10;&#9;&#9;}&#10;&#9;&#9;h2{&#10;&#9;&#9;&#9;color:#202020;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:22px;&#10;&#9;&#9;&#9;font-style:normal;&#10;&#9;&#9;&#9;font-weight:bold;&#10;&#9;&#9;&#9;line-height:125%;&#10;&#9;&#9;&#9;letter-spacing:normal;&#10;&#9;&#9;&#9;text-align:left;&#10;&#9;&#9;}&#10;&#9;&#9;h3{&#10;&#9;&#9;&#9;color:#202020;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:20px;&#10;&#9;&#9;&#9;font-style:normal;&#10;&#9;&#9;&#9;font-weight:bold;&#10;&#9;&#9;&#9;line-height:125%;&#10;&#9;&#9;&#9;letter-spacing:normal;&#10;&#9;&#9;&#9;text-align:left;&#10;&#9;&#9;}&#10;&#9;&#9;h4{&#10;&#9;&#9;&#9;color:#202020;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:18px;&#10;&#9;&#9;&#9;font-style:normal;&#10;&#9;&#9;&#9;font-weight:bold;&#10;&#9;&#9;&#9;line-height:125%;&#10;&#9;&#9;&#9;letter-spacing:normal;&#10;&#9;&#9;&#9;text-align:left;&#10;&#9;&#9;}&#10;&#9;&#9;#templatePreheader{&#10;&#9;&#9;&#9;background-color:#fafafa;&#10;&#9;&#9;&#9;background-image:none;&#10;&#9;&#9;&#9;background-repeat:no-repeat;&#10;&#9;&#9;&#9;background-position:center;&#10;&#9;&#9;&#9;background-size:cover;&#10;&#9;&#9;&#9;border-top:0;&#10;&#9;&#9;&#9;border-bottom:0;&#10;&#9;&#9;&#9;padding-top:10px;&#10;&#9;&#9;&#9;padding-bottom:0px;&#10;&#9;&#9;}&#10;&#9;&#9;#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{&#10;&#9;&#9;&#9;color:#656565;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:12px;&#10;&#9;&#9;&#9;line-height:150%;&#10;&#9;&#9;&#9;text-align:left;&#10;&#9;&#9;}&#10;&#9;&#9;#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{&#10;&#9;&#9;&#9;color:#898989;&#10;&#9;&#9;&#9;font-weight:normal;&#10;&#9;&#9;&#9;text-decoration:none;&#10;&#9;&#9;}&#10;&#9;&#9;#templateHeader{&#10;&#9;&#9;&#9;background-color:#60c7c6;&#10;&#9;&#9;&#9;background-image:none;&#10;&#9;&#9;&#9;background-repeat:no-repeat;&#10;&#9;&#9;&#9;background-position:center;&#10;&#9;&#9;&#9;background-size:cover;&#10;&#9;&#9;&#9;border-top:0;&#10;&#9;&#9;&#9;border-bottom:0;&#10;&#9;&#9;&#9;padding-top:0px;&#10;&#9;&#9;&#9;padding-bottom:0px;&#10;&#9;&#9;}&#10;&#9;&#9;#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{&#10;&#9;&#9;&#9;color:#202020;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:16px;&#10;&#9;&#9;&#9;line-height:150%;&#10;&#9;&#9;&#9;text-align:left;&#10;&#9;&#9;}&#10;&#9;&#9;#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{&#10;&#9;&#9;&#9;color:#007C89;&#10;&#9;&#9;&#9;font-weight:normal;&#10;&#9;&#9;&#9;text-decoration:underline;&#10;&#9;&#9;}&#10;&#9;&#9;#templateBody{&#10;&#9;&#9;&#9;background-color:#ffffff;&#10;&#9;&#9;&#9;background-image:url(&quot;https://gallery.mailchimp.com/ed526b2f15f645fc575e0db76/images/a3dde7f2-ddb4-49e0-a119-a523cf6237bd.jpg&quot;);&#10;&#9;&#9;&#9;background-repeat:no-repeat;&#10;&#9;&#9;&#9;background-position:top;&#10;&#9;&#9;&#9;background-size:cover;&#10;&#9;&#9;&#9;border-top:0;&#10;&#9;&#9;&#9;border-bottom:2px solid #EAEAEA;&#10;&#9;&#9;&#9;padding-top:0;&#10;&#9;&#9;&#9;padding-bottom:0px;&#10;&#9;&#9;}&#10;&#9;&#9;#templateBody .mcnTextContent,#templateBody .mcnTextContent p{&#10;&#9;&#9;&#9;color:#202020;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:16px;&#10;&#9;&#9;&#9;line-height:150%;&#10;&#9;&#9;&#9;text-align:left;&#10;&#9;&#9;}&#10;&#9;&#9;#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{&#10;&#9;&#9;&#9;color:#007C89;&#10;&#9;&#9;&#9;font-weight:normal;&#10;&#9;&#9;&#9;text-decoration:none;&#10;&#9;&#9;}&#10;&#9;&#9;#templateFooter{&#10;&#9;&#9;&#9;background-color:#fafafa;&#10;&#9;&#9;&#9;background-image:none;&#10;&#9;&#9;&#9;background-repeat:no-repeat;&#10;&#9;&#9;&#9;background-position:center;&#10;&#9;&#9;&#9;background-size:cover;&#10;&#9;&#9;&#9;border-top:0;&#10;&#9;&#9;&#9;border-bottom:0;&#10;&#9;&#9;&#9;padding-top:9px;&#10;&#9;&#9;&#9;padding-bottom:9px;&#10;&#9;&#9;}&#10;&#9;&#9;#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{&#10;&#9;&#9;&#9;color:#656565;&#10;&#9;&#9;&#9;font-family:Helvetica;&#10;&#9;&#9;&#9;font-size:12px;&#10;&#9;&#9;&#9;line-height:150%;&#10;&#9;&#9;&#9;text-align:center;&#10;&#9;&#9;}&#10;&#9;&#9;#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{&#10;&#9;&#9;&#9;color:#656565;&#10;&#9;&#9;&#9;font-weight:normal;&#10;&#9;&#9;&#9;text-decoration:none;&#10;&#9;&#9;}&#10;&#9;@media only screen and (min-width:768px){&#10;&#9;&#9;.templateContainer{&#10;&#9;&#9;&#9;width:600px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;body,table,td,p,a,li,blockquote{&#10;&#9;&#9;&#9;-webkit-text-size-adjust:none !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;body{&#10;&#9;&#9;&#9;width:100% !important;&#10;&#9;&#9;&#9;min-width:100% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;#bodyCell{&#10;&#9;&#9;&#9;padding-top:10px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnRetinaImage{&#10;&#9;&#9;&#9;max-width:100% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnImage{&#10;&#9;&#9;&#9;width:100% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{&#10;&#9;&#9;&#9;max-width:100% !important;&#10;&#9;&#9;&#9;width:100% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnBoxedTextContentContainer{&#10;&#9;&#9;&#9;min-width:100% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnImageGroupContent{&#10;&#9;&#9;&#9;padding:9px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{&#10;&#9;&#9;&#9;padding-top:9px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{&#10;&#9;&#9;&#9;padding-top:18px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnImageCardBottomImageContent{&#10;&#9;&#9;&#9;padding-bottom:9px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnImageGroupBlockInner{&#10;&#9;&#9;&#9;padding-top:0 !important;&#10;&#9;&#9;&#9;padding-bottom:0 !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnImageGroupBlockOuter{&#10;&#9;&#9;&#9;padding-top:9px !important;&#10;&#9;&#9;&#9;padding-bottom:9px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnTextContent,.mcnBoxedTextContentColumn{&#10;&#9;&#9;&#9;padding-right:18px !important;&#10;&#9;&#9;&#9;padding-left:18px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{&#10;&#9;&#9;&#9;padding-right:18px !important;&#10;&#9;&#9;&#9;padding-bottom:0 !important;&#10;&#9;&#9;&#9;padding-left:18px !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcpreview-image-uploader{&#10;&#9;&#9;&#9;display:none !important;&#10;&#9;&#9;&#9;width:100% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;h1{&#10;&#9;&#9;&#9;font-size:22px !important;&#10;&#9;&#9;&#9;line-height:125% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;h2{&#10;&#9;&#9;&#9;font-size:20px !important;&#10;&#9;&#9;&#9;line-height:125% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;h3{&#10;&#9;&#9;&#9;font-size:18px !important;&#10;&#9;&#9;&#9;line-height:125% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;h4{&#10;&#9;&#9;&#9;font-size:16px !important;&#10;&#9;&#9;&#9;line-height:150% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;.mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{&#10;&#9;&#9;&#9;font-size:14px !important;&#10;&#9;&#9;&#9;line-height:150% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;#templatePreheader{&#10;&#9;&#9;&#9;display:block !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{&#10;&#9;&#9;&#9;font-size:14px !important;&#10;&#9;&#9;&#9;line-height:150% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{&#10;&#9;&#9;&#9;font-size:16px !important;&#10;&#9;&#9;&#9;line-height:150% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;#templateBody .mcnTextContent,#templateBody .mcnTextContent p{&#10;&#9;&#9;&#9;font-size:16px !important;&#10;&#9;&#9;&#9;line-height:150% !important;&#10;&#9;&#9;}&#10;&#10;}&#9;@media only screen and (max-width: 480px){&#10;&#9;&#9;#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{&#10;&#9;&#9;&#9;font-size:14px !important;&#10;&#9;&#9;&#9;line-height:150% !important;&#10;&#9;&#9;}&#10;&#10;}&amp;lt;/style&amp;gt;" /><center>
  <div>
    <div>
      <br />
    </div>
  </div>
  <table id="bodyTable" style="border-collapse:collapse;height:100%;margin:0;padding:0;width:100%;background-color:#333869" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
    <tbody>
      <tr>
        <td id="bodyCell" style="height:100%;margin:0;padding:10px;width:100%;border-top:0" align="center" valign="top">
          <table style="border-collapse:collapse;border:0;max-width:600px!important" border="0" width="100%" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td id="templatePreheader" style="background:#fafafa none no-repeat center/cover;background-color:#fafafa;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:10px;padding-bottom:0px" valign="top">
                  <table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="padding:0px" valign="top">
                          <table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
                            <tbody>
                              <tr>
                                <td style="text-align:center;padding:0 0px 0 0px" valign="top">
                                  <div>
                                    <img src="https://share1.cloudhq-mkt3.net/images_1524368_e6020c61-2016-0138-74a3-64434b0c2d74_4580" alt="Untitled drawing.jpg" width="452" height="167" />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="min-width:100%;padding:10px 18px 0px">
                          <table style="min-width:100%;border-top:2px solid #eaeaea;border-collapse:collapse;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr style="height:17px">
                                <td style="height:17px">&#xA0;</td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td id="templateHeader" style="background:#83c239 none no-repeat center/cover;background-color:#83c239;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px" valign="top">
                  <table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="padding-top:9px" valign="top">
                          <table style="max-width:100%;min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
                            <tbody>
                              <tr>
                                <td style="word-break:break-word;color:#202020;font-family:Helvetica;font-size:16px;line-height:150%;text-align:left;padding:0 18px 9px 18px" valign="top">
                                  <div style="text-align:center">
                                    <span style="font-size:20px">
                                      <span style="font-family:playfair display,georgia,times new roman,serif">
                                        <span style="color:#ffffff">Cookies for a Cause!</span>
                                      </span>
                                    </span>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td id="templateBody" style="background:#ffffff url('https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download\000026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l') no-repeat top/cover;background-color:#ffffff;background-image:url('https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download\000026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l');background-repeat:no-repeat;background-position:top;background-size:cover;border-top:0;border-bottom:2px solid #eaeaea;padding-top:0;padding-bottom:0px" valign="top">
                  <table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="padding-top:9px" valign="top">
                          <table style="max-width:100%;min-width:100%;border-collapse:collapse;height:96px;width:95.8865%" border="0" width="449" cellspacing="0" cellpadding="0" align="left">
                            <tbody>
                              <tr style="height:96px">
                                <td style="padding:0px 18px 9px;line-height:200%;word-break:break-word;text-align:left;height:96px" valign="top">
                                  <div style="text-align:center">
                                    <span style="font-size:36pt">
                                      <span style="text-align:left">
                                        <span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
                                          <br />
                                        </span>
                                      </span>
                                    </span>
                                  </div>
                                  <div style="text-align:center">
                                    <span style="font-size:36pt">
                                      <span style="text-align:left">
                                        <span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
                                          <br />
                                        </span>
                                      </span>
                                    </span>
                                  </div>
                                  <div style="text-align:center">
                                    <span style="font-size:36pt">&#xA0; 
                                      <span style="text-align:left">
                                        <span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
                                          <br />
                                        </span>
                                      </span>
                                    </span>
                                  </div>
                                  <div style="text-align:center">
                                    <span style="font-size:36pt">
                                      <span style="text-align:left">
                                        <span style="color:#ffffff;font-family:arvo,courier,georgia,serif">ENVIRONMENTAL</span>
                                      </span> 
                                      <span style="color:#202020;font-family:Helvetica">
                                        <span style="font-family:arvo,courier,georgia,serif">
                                          <span style="color:#ffffff">CLUB</span>
                                        </span>
                                      </span>
                                    </span>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="min-width:100%;padding:0px 18px">
                          <table style="min-width:100%;border-top:1px solid #ffffff;border-collapse:collapse;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr style="height:17px">
                                <td style="height:17px">&#xA0;</td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="padding-top:9px" valign="top">
                          <table style="max-width:100%;min-width:100%;border-collapse:collapse;height:45px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
                            <tbody>
                              <tr style="height:45px">
                                <td style="padding:0px 18px 9px;line-height:200%;word-break:break-word;color:#202020;font-family:Helvetica;font-size:16px;text-align:left;height:45px" valign="top">
                                  <div style="text-align:center">
                                    <span style="font-size:20px">
                                      <span style="font-family:arvo,courier,georgia,serif">
                                        <span style="color:#ffffff">Confirmation Number:</span>
                                      </span>
                                    </span>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table style="min-width:100%;border-collapse:collapse;height:53px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr style="height:36px">
                        <td style="text-align:center;padding:0px 18px 18px;height:36px" align="center" valign="top">
                          <span style="color:#ffffff">
                            <span style="font-size:48px">ConNum</span>
                          </span>
                        </td>
                      </tr>
                      <tr style="height:17px">
                        <td style="padding:0px 18px 18px;height:17px">
                          <span style="color:#008080">
                            <br />
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr style="height:17px">
                        <td style="min-width:100%;padding:150px 18px 0px;height:17px">&#xA0;
                          <br />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td id="templateFooter" style="background:none center center/cover no-repeat #fafafa;border-top:0px;border-bottom:0px;padding-top:9px;padding-bottom:9px;text-align:center" valign="top">
                  <a href="mailto:rrhsenvironmentals@gmail.com" target="_blank" rel="noopener">Contact us</a> 
                  <br />
                  <table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important;height:36px;width:102.542%" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr style="height:36px">
                        <td style="min-width:100%;padding:10px 18px 25px;height:36px;width:100%">
                          <table style="min-width:100%;border-top:2px solid #eeeeee;border-collapse:collapse;height:34px;width:100.224%" border="0" width="448" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr style="height:17px">
                                <td style="height:17px">
                                  <br />
                                </td>
                              </tr>
                              <tr style="height:17px">
                                <td style="height:17px">&#xA0;</td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</center>
<br clear="all" />
<div>
  <br />
</div>
<div dir="ltr" data-smartmail="gmail_signature">
  <div dir="ltr">
    <br />
  </div>
</div>
</div>
</body>
</html>

Пожалуйста, имейте в виду, что я знаю основы c Java, и немного, чтобы нет HTML, я использовал веб-строитель для этого. Таким образом, любые объяснения будут лучше приняты в письменном виде с учетом 5-летнего возраста. Мне очень нравится учиться программировать, и я действительно хочу продолжать заниматься этим, поэтому, пожалуйста, смиритесь с моим недостатком знаний.

1 Ответ

2 голосов
/ 07 февраля 2020

Outlook не работает с background-image. Чтобы получить изображение на фоне электронной почты Outlook, необходимо использовать vml.

Образец VML

 <table>
    <tr>
        <td valign="middle" style="text-align: center; background-image: url('https://via.placeholder.com/600x230/222222/666666'); background-color: #222222; background-position: center center !important; background-size: cover !important;">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
            <v:fill type="tile" src="https://via.placeholder.com/600x230/222222/666666" color="#222222" />
            <v:textbox inset="0,0,0,0">
            <![endif]-->
            <div>
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
                            <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p>
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</table>

Неверный путь к изображению

Кроме того, путь к изображению недействителен. Этот URL-адрес изображения не виден мне, что означает, что он не виден никому, кроме вас:

https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download\000026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l

Чтобы это письмо работало, вам нужен URL-адрес, видимый для почтовых клиентов. Вам следует использовать абсолютный путь к файлу.

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

В общем случае изображение должно заканчиваться дескриптором, объясняющим тип изображения, например: .jpg, .png или .gif. Я говорю это, хотя мой образец не использует один, но это потому, что placeholder.com разработал URL для работы. Другие хосты могут не предлагать такую ​​возможность.

Дальнейшее чтение

Удачи.

...