当前位置： 文江博客话题详情

电子邮件模板在Live Server上看起来不错，但是当我通过邮件发送时，它会损坏

发布于 2025-01-21 21:52:02 字数 9034 浏览 1 评论 0原文

我尝试创建第一个电子邮件模板，当我通过Live Server打开它时，它看起来不错，但是当我通过PutsMail通过邮件发送它时，它看起来非常糟糕且破碎。 我尝试在线上载图片，但没有任何改变。 在代码段上，它看起来也不错，所以我认为代码很好？ 我的想法已经用完了，有人可以帮助我吗？

邮件预览

“” -

live服务器预览

“”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VANS E-Mail Template</title>
  <style type="text/css">
    body {
      margin: 0;
      background-color: #cccccc;
    }
    table {
      border-spacing: 0;
    }
    td {
      padding: 0;
    }
    img {
      border: 0;
    }
    .wrapper {
      width: 100%;
      table-layout: fixed;
      background-color: #cccccc;
      padding-bottom: 40px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .main {
      background-color: #ffffff;
      margin: 0 auto;
      width: 100%;
      max-width: 600px;
      border-spacing: 0;
      color: #4a4a4a;
    }
    .two-columns {
      text-align: center;
      font-size: 0;
      padding: 40px 0;
    }
    .two-columns .column {
      width: 100%;
      max-width: 300px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      font-size: 18px;
      padding-bottom: 40px;
    }
    .button {
      background-color: #C9192E;
      color: #ffffff;
      text-decoration: none;
      padding: 15px 20px;
      border-radius: 2px;
    }
    .banner {
      max-width: 600px;
    }
    .container {
      position: relative;
      text-align: center;
      color: white;
      margin-top: 0px;
    }
    .container2 {
      position: relative;
      text-align: center;
      margin-top: -60px;
      display: block;
    }
    .background {
      height: 70px;
      width: 600px;
      margin-top: 0px;
      background-color: #1C1C1C;
    }
    .background2 {
      height: 70px;
      width: 600px;
      background-color: #1C1C1C;
      background: #1C1C1C;
      background-size: 100%;
    }
    .background-text {
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-decoration: none;
      color: white;
    }
    .background-text2 {
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-decoration: none;
      color: white;
      white-space: nowrap;
    }
    .first {
      margin-left: 15px;
      margin-top: 15px;
      z-index: 9;
      display: block;
      position: absolute;
    }
    .first-text {
      font-size: 32px;
      padding: 0;
      margin-top: -30px;
      margin-left: 45px;
      color: #272727;
    }
    .first2-text {
      font-size: 22px;
      padding: 0;
      margin-top: -30px;
      margin-left: 50px;
      color: #272727;
    }
    .second {
      margin-left: 315px;
      margin-top: 40px;
      display: block;
      position: absolute;
    }
    .second-text {
      font-size: 32px;
      padding: -300px;
      margin-left: 380px;
      line-height: 0;
      color: #272727;
    }
    .second2-text {
      font-size: 22px;
      padding: -300px;
      margin-left: 380px;
      line-height: 0;
      color: #272727;
    }
    .third {
      margin-top: 290px;
      margin-left: 15px;
    }
    .third-text {
      font-size: 32px;
      padding: -300px;
      margin-top: -275px;
      margin-left: 340px;
      line-height: 0;
      color: #272727;
    }
    .third2-text {
      font-size: 22px;
      padding: -300px;
      margin-left: 340px;
      line-height: 0;
      background: "#D0CFC8";
      background-size: "100%";
      color: #272727;
    }
    .see-more {
      margin-left: 380px;
      margin-top: 80px;
      font-size: 26px;
    }
    .background-rect {
      background: #D0CFC8;
      height: 150px;
      width: 600px;
    }
    .icons {
      position: relative;
      display: block;
      margin-top: -58px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
  <center class="wrapper">
    <table class="main" width="100%">
      <!-- LOGO SECTION -->
      <!-- BANNER IMAGE !! -->
      <tr>
        <td>
          <a href="#"><img src="https://i.ibb.co/MPsmk9q/banner.png" alt="Banner" class="banner"> </a>
        </td>
      </tr>
      <!-- BACKGROUND COLOR TEXT !!-->
      <tr>
        <td class="container">
          <div class="background"></div>
          <a href="#" class="background-text">SHOP CLASSICS</a>
        </td>
        </td>
      </tr>
      <!-- TWO COLUMN SECTION -->
      <tr>
        <td>
          <table width="100%">
            <tr>
              <td class="two-columns" style="background-color: #D8D7D3; padding-bottom: 0;">
                <table class="column">
                  <tr>
                    <td>
                      <a href="#"><img src="https://i.ibb.co/YfSffKs/women.webp" alt="Women" title="Women" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px;"></a>
                      <a href="#" class="button">BUY WOMENS</a>
                    </td>
                  </tr>
                </table>
                <table class="column">
                  <tr>
                    <td class="column">
                      <a href="#"><img src="https://i.ibb.co/bvHdthf/men.webp" alt="Men" title="Men" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px; -webkit-transform: scaleX(-1);
                                                    transform: scaleX(-1);"></a>
                      </a>
                      <a href="#" class="button">BUY  MEN</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="container">
          <div class="background"></div>
          <a href="#" class="background-text2">OUR LATEST COLLECTION</a>
        </td>
      </tr>

      <!-- FOOTER SECTION -->
      <tr style="background: #D0CFC8; background-size: 100%;">
        <td>
          <div class="first">
            <a href="#"><img src="https://i.ibb.co/YQ09v1N/Eco.webp" alt="Eco" style="max-width: 350px"></a>
            <div class="first-text">
              <p>PAISLEY PATTERN</p>
            </div>
            <div class="first2-text">
              <p>Embrace bohemian style.</p>
            </div>
          </div>
          <div class="second-text">
            <p>ECO</p>
            <p>POSITIVITY</p>
            <p>COLLECTION</p>
          </div>
          <div class="second2-text">
            <p>Make a difference,</p>
            <p>be the change.</p>
          </div>
          <div class="second">
            <a href="#"><img src="https://i.ibb.co/4tVLfzn/paisley.webp" alt="Paisley" style="max-width: 270px;"></a>
          </div>
          <div class="third">
            <a href="#"><img src="https://i.ibb.co/CVw2t2R/Spring-HUes.webp" alt="SpringHues" style="max-width: 310px;"></a>
          </div>
          <div class="third-text">
            <p>SPRING HUES</p>
          </div>
          <div class="third2-text">
            <p>Colours That Celebrate</p>
            <p>Spring.</p>
          </div>
          <div class="see-more">
            <a href="#" class="button">SEE MORE</a>
          </div>
          <div class="background-rect"></div>
        </td>
      </tr>
      <!-- SOCIAL MEDIA ICONS -->
      <div>
        <td class="container2">
          <div class="background2"></div>
          <a href="#" class="background-text" style="background-size: 100%;"></a>
          <div class="icons">
            <a href=""><img src="https://i.ibb.co/bQgqb1L/icons.png" alt=""></a>
          </div>
        </td>
      </div>
      <!-- BROWN BORDER -->
    </table>
  </center>
</body>
</html>

原文

I tried to create my first E-mail template, when I open it by Live Server it looks good, but when I send it via mail with putsmail it looks very crappy and broken.
I tried to upload pictures online but it doesn't change anything.
On code snippet it also looks good so I think that code is fine?
I have run out of ideas, is there anyone who can help me?

Mail preview

-

Live Server preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VANS E-Mail Template</title>
  <style type="text/css">
    body {
      margin: 0;
      background-color: #cccccc;
    }
    table {
      border-spacing: 0;
    }
    td {
      padding: 0;
    }
    img {
      border: 0;
    }
    .wrapper {
      width: 100%;
      table-layout: fixed;
      background-color: #cccccc;
      padding-bottom: 40px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .main {
      background-color: #ffffff;
      margin: 0 auto;
      width: 100%;
      max-width: 600px;
      border-spacing: 0;
      color: #4a4a4a;
    }
    .two-columns {
      text-align: center;
      font-size: 0;
      padding: 40px 0;
    }
    .two-columns .column {
      width: 100%;
      max-width: 300px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      font-size: 18px;
      padding-bottom: 40px;
    }
    .button {
      background-color: #C9192E;
      color: #ffffff;
      text-decoration: none;
      padding: 15px 20px;
      border-radius: 2px;
    }
    .banner {
      max-width: 600px;
    }
    .container {
      position: relative;
      text-align: center;
      color: white;
      margin-top: 0px;
    }
    .container2 {
      position: relative;
      text-align: center;
      margin-top: -60px;
      display: block;
    }
    .background {
      height: 70px;
      width: 600px;
      margin-top: 0px;
      background-color: #1C1C1C;
    }
    .background2 {
      height: 70px;
      width: 600px;
      background-color: #1C1C1C;
      background: #1C1C1C;
      background-size: 100%;
    }
    .background-text {
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-decoration: none;
      color: white;
    }
    .background-text2 {
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-decoration: none;
      color: white;
      white-space: nowrap;
    }
    .first {
      margin-left: 15px;
      margin-top: 15px;
      z-index: 9;
      display: block;
      position: absolute;
    }
    .first-text {
      font-size: 32px;
      padding: 0;
      margin-top: -30px;
      margin-left: 45px;
      color: #272727;
    }
    .first2-text {
      font-size: 22px;
      padding: 0;
      margin-top: -30px;
      margin-left: 50px;
      color: #272727;
    }
    .second {
      margin-left: 315px;
      margin-top: 40px;
      display: block;
      position: absolute;
    }
    .second-text {
      font-size: 32px;
      padding: -300px;
      margin-left: 380px;
      line-height: 0;
      color: #272727;
    }
    .second2-text {
      font-size: 22px;
      padding: -300px;
      margin-left: 380px;
      line-height: 0;
      color: #272727;
    }
    .third {
      margin-top: 290px;
      margin-left: 15px;
    }
    .third-text {
      font-size: 32px;
      padding: -300px;
      margin-top: -275px;
      margin-left: 340px;
      line-height: 0;
      color: #272727;
    }
    .third2-text {
      font-size: 22px;
      padding: -300px;
      margin-left: 340px;
      line-height: 0;
      background: "#D0CFC8";
      background-size: "100%";
      color: #272727;
    }
    .see-more {
      margin-left: 380px;
      margin-top: 80px;
      font-size: 26px;
    }
    .background-rect {
      background: #D0CFC8;
      height: 150px;
      width: 600px;
    }
    .icons {
      position: relative;
      display: block;
      margin-top: -58px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
  <center class="wrapper">
    <table class="main" width="100%">
      <!-- LOGO SECTION -->
      <!-- BANNER IMAGE !! -->
      <tr>
        <td>
          <a href="#"><img src="https://i.ibb.co/MPsmk9q/banner.png" alt="Banner" class="banner"> </a>
        </td>
      </tr>
      <!-- BACKGROUND COLOR TEXT !!-->
      <tr>
        <td class="container">
          <div class="background"></div>
          <a href="#" class="background-text">SHOP CLASSICS</a>
        </td>
        </td>
      </tr>
      <!-- TWO COLUMN SECTION -->
      <tr>
        <td>
          <table width="100%">
            <tr>
              <td class="two-columns" style="background-color: #D8D7D3; padding-bottom: 0;">
                <table class="column">
                  <tr>
                    <td>
                      <a href="#"><img src="https://i.ibb.co/YfSffKs/women.webp" alt="Women" title="Women" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px;"></a>
                      <a href="#" class="button">BUY WOMENS</a>
                    </td>
                  </tr>
                </table>
                <table class="column">
                  <tr>
                    <td class="column">
                      <a href="#"><img src="https://i.ibb.co/bvHdthf/men.webp" alt="Men" title="Men" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px; -webkit-transform: scaleX(-1);
                                                    transform: scaleX(-1);"></a>
                      </a>
                      <a href="#" class="button">BUY  MEN</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="container">
          <div class="background"></div>
          <a href="#" class="background-text2">OUR LATEST COLLECTION</a>
        </td>
      </tr>

      <!-- FOOTER SECTION -->
      <tr style="background: #D0CFC8; background-size: 100%;">
        <td>
          <div class="first">
            <a href="#"><img src="https://i.ibb.co/YQ09v1N/Eco.webp" alt="Eco" style="max-width: 350px"></a>
            <div class="first-text">
              <p>PAISLEY PATTERN</p>
            </div>
            <div class="first2-text">
              <p>Embrace bohemian style.</p>
            </div>
          </div>
          <div class="second-text">
            <p>ECO</p>
            <p>POSITIVITY</p>
            <p>COLLECTION</p>
          </div>
          <div class="second2-text">
            <p>Make a difference,</p>
            <p>be the change.</p>
          </div>
          <div class="second">
            <a href="#"><img src="https://i.ibb.co/4tVLfzn/paisley.webp" alt="Paisley" style="max-width: 270px;"></a>
          </div>
          <div class="third">
            <a href="#"><img src="https://i.ibb.co/CVw2t2R/Spring-HUes.webp" alt="SpringHues" style="max-width: 310px;"></a>
          </div>
          <div class="third-text">
            <p>SPRING HUES</p>
          </div>
          <div class="third2-text">
            <p>Colours That Celebrate</p>
            <p>Spring.</p>
          </div>
          <div class="see-more">
            <a href="#" class="button">SEE MORE</a>
          </div>
          <div class="background-rect"></div>
        </td>
      </tr>
      <!-- SOCIAL MEDIA ICONS -->
      <div>
        <td class="container2">
          <div class="background2"></div>
          <a href="#" class="background-text" style="background-size: 100%;"></a>
          <div class="icons">
            <a href=""><img src="https://i.ibb.co/bQgqb1L/icons.png" alt=""></a>
          </div>
        </td>
      </div>
      <!-- BROWN BORDER -->
    </table>
  </center>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

扬花落满肩

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

动次打次papapa

文章 0 评论 0

我是有多爱你

文章 0 评论 0

原来分手还会想你

文章 0 评论 0

linces

文章 0 评论 0

霓裳挽歌倾城醉

文章 0 评论 0

玍銹的英雄夢

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文