gmail呈现电子邮件的麻烦

时间:2014-04-02 18:24:37

标签: html email gmail

<style type="text/css">

@media only screen and (max-width: 480px) {

    .secondary img {
        width: 100%;
    }

}

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200);

* {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}

body {
    font-family:'Source Sans Pro', Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 50px;
    font-weight: 200;
    color: #FFFFFF;
    line-height: 50px;
    margin-bottom: 40px;
}

h2 {
    font-size: 36px;
    font-weight: 200;
    color: #444444;
    margin-bottom: 30px;
}

h2 strong {
    font-weight: 400;
    color: #51a33d;
}

h3 {
    font-size: 24px;
    font-weight: 400;
    color: #444444;
}

p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #AEAEAE;
    margin-bottom: 20px;
}

p.light {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #999999;
    margin-bottom: 30px;
}

p.quote {
    font-size: 24px;
    font-weight: 200;
    line-height: 30px;
    color: #444444;
}

table {
    text-align: center;
}

table.wrap {
    width: 640px;
    margin: 0 auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

table.flat-bottom {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

table.block {
    width: 250px;
    margin: 0 10px;
}

table.btn {
    width:260px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

table.btn a {
    width: 250px;
    display: block;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
}

table.single a {
    font-size: 24px;
    padding: 15px 0;
}

table.double a {
    font-size: 18px;
    padding: 10px 0;
}

table.green {
    background: #51a33d;
}

table.gray {
    background-color: #999999;
}

table.orange {
    background-color: #F57B20;
}

table img {
    margin: 0 auto;
}

a img {
    border: none;
}

.main-img {
    display: block;
    width: 640px;
    margin: 0 auto;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.icon-img {
    width: 90px;
    height: 90px;
}

.main {
    background-color: #444444;
}

.main a {
    color: #FFFFFF;
    text-decoration: none;
}

.secondary {
    background-color: #EEEEEE;
}

.secondary a {
    color: #51A33D;
    text-decoration: none;
}

.secondary-logo img {
    display: inline-block;
    margin:0 auto 20px auto;
}

icon img {
    display: inline-block;
    margin:0 auto;
}

.unsubscribe {
    font-size: 14px;
    color: #999999;
    text-align: center;
    margin-bottom: 20px;
}

</style>
</head>

<body>
<center>
<div style="width:640px; text-align:center; margin: 0 auto;">
<p style="font-size: 14px; margin-bottom: 0px;">Trouble viewing? <a href="[webversion]">View it in your web browser.</a></p>
</div>
<table cellpadding="0" cellspacing="0" class="main wrap flat-bottom"> 
    <tr>
    <td width="50">&nbsp;</td>
    <td>
        <table cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3" width="540" height="60">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">
            <a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email"><img src="http://img03.en25.com/EloquaImages/clients/SnagajobcomInc/{33384eb5-e6b0-4030-a8f8-332c77753d99}_logo.png" alt="When I Work" /></a>
          </td>
        </tr>
        <tr>
            <td colspan="3" height="30">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">
            <font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
                <h1>Building the Team to Make Scheduling Easier</h1>
                <p>Last month we teamed up with When I Work to give our customers an extended free trial of their awesome scheduling software. There was such a great response that we wanted to make sure that you had another chance to easily schedule your employees.</p>
            </font>
          </td>
        </tr>
        <tr>
            <td colspan="3" height="20">&nbsp;</td>
        </tr>
        <tr>
           <td colspan="3">
              <table cellpadding="0" cellspacing="0">
                  <tr>
                  <td width="110">&nbsp;</td>
                  <td>
                      <table class="" style="width: 320px;">
                      <tr>
                       <td valign="middle" height="55"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email" style="width: 320px; font-size: 24px; background-color: #f47a20; border: 1px solid #f47a20; padding: 20px; border-radius: 5px;">Schedule My Employees</a></font></td>
                      </tr>
                      </table>  
                  </td>
                  <td width="110">&nbsp;</td>
                </tr>
              </table>
           </td>
        </tr>
        <tr>     
            <td colspan="3" height="50">&nbsp;</td>
        </tr>
      </table>
    </td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
<a href="http://wheniwork.com/watch-video/ "><img src="http://staging.thisclicks.net/email/wiw/v4/images/main-img-phone.jpg" class="main-img" /></a>
<br />

<table cellpadding="0" cellspacing="0" class="secondary wrap">
    <tr>
    <td width="50">&nbsp;</td>
    <td>
        <table cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3" height="70">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="secondary-logo">
                    <img src="http://staging.thisclicks.net/email/wiw/v4/images/wiw-logo.jpg" />
                </div>
                <font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
                    <h2>Employee Scheduling. <strong>Reinvented.</strong></h2>
                    <p class="light"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email">When I Work</a> is the easiest way for a business to schedule and communicate with its employees using the web, mobile, text messaging, and social media.</p>
                </font>
          </td>
        </tr>
        <tr>
            <td colspan="2" height="20">&nbsp;</td>
        </tr>
        <tr>
            <td width="110">&nbsp;</td>
          <td>
            <table class="btn single green" style="width: 320px">
              <tr>
                <td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email" style="width: 320px; font-size: 24px;">Schedule My Employees</a></font></td>
              </tr>
            </table>
          </td>
          <td width="110">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" height="80">&nbsp;</td>
        </tr>
      </table>
    </td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
<br />

<table cellpadding="0" cellspacing="0" class="secondary wrap">
    <tr>
    <td width="50">&nbsp;</td>
    <td>
        <table cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3"  width="540" height="70">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">
                <font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
                    <h2>Make Life Easier for You<br />and Your Company</h2>
                    <p><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email">When I Work</a> is offering an extended free trial to<br />Snagajob customers for a limited time.</p>
                    <p class="light">Click below to begin receiving applications today!</p>
               </font>
           </td>
        </tr>
        <tr>
            <td colspan="2" height="20">&nbsp;</td>
        </tr>
        <tr>
            <td width="110">&nbsp;</td>
          <td>
            <table class="btn single green" style="width: 320px">
              <tr>
                <td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif"><a href="http://wheniwork.com/?utm_source=partneremail&utm_medium=email&utm_campaign=partnersaj3email" style="width: 320px; font-size: 24px;">Schedule My Employees</a></font></td>
              </tr>
            </table>
          </td>
          <td width="110">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" height="60">&nbsp;</td>
        </tr>
      </table>
    </td>
    <td width="50">&nbsp;</td>
  </tr>
</table>
<br />
<div class="unsubscribe"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">If you are no longer interested you can <unsubscribe>unsubscribe</unsubscribe> instantly.</font></div>
</center>
</body>
</html>

它在我的大多数电子邮件客户端工作但在gmail中看起来很糟糕。他们不支持我正在做的事吗?我知道我在之前的电子邮件中遇到过gmail和margin的问题。我不确定如何从这里重新格式化它?

1 个答案:

答案 0 :(得分:2)

Gmail会删除样式标记内的所有内容,因此您需要确保所有样式都是内联的。

以下是Zurb的CSS Inliner tool工具。