如何使HTML与发送到Outlook的电子邮件一起使用?

问题描述 投票:0回答:1

我正在制作一个程序,该程序使用其学生ID号向具有确认号的学生发送电子邮件。我们所有的电子邮件都使用相同的模板,即id @ whatever,该模板通过Outlook来获取,并且它们阻止了我们学生电子邮件的gmail。

[无论如何,我写了一个html电子邮件,当我将其发送到gmail时,一切都会显示出来。当我将其发送到学生帐户以测试他们所看到的内容时,我只会看到应该存在的内容的四分之一。

所以我的问题是:有没有办法改变我的HTML,使其在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:[email protected]" 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>

[请记住,我知道基本的Java,几乎没有HTML,为此我使用了一个Web构建器。因此,考虑到5岁的年龄,撰写任何解释都更好。我真的很喜欢学习编程,并且真的想继续这样做,所以请忍受我的知识不足。

html outlook gmail javamail html-email
1个回答
2
投票

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>

无效的图像路径

此外,您的图像路径无效。该图片网址对我不可见,这意味着除您之外其他任何人都看不到:

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设计了可以工作的网址。其他主机可能不提供此功能。

进一步阅读

祝你好运。>>

© www.soinside.com 2019 - 2024. All rights reserved.