Question

HTML：

<div id="container">
    <div id="social-links">
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_03.jpg" alt="">
        www.twitter.com/roadsprep
        <br />
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_09.jpg" alt="">
        www.facebook.com/roadsprep
    </div>
    <div id="website-link">www.roadsprep.com</div>
    <div id="now-at-gurgaon">
        NOW AT
        <BR />
        GURGAON
    </div>
    <div id="gray-box">
        We specialize in
        <br />
        SAT, GRE, GMAT, ACT
        <br />
        IELTS and TOEFL coaching!
    </div>
    <div id="pointers">
        <ul>
            <li>Over 6 years of Test Prep Experience!</li>
            <li>Over 300 students with 2100 + scores</li>
            <li>On average, an improvement of 400 point improvement in scores</li>
        </ul>
    </div>
    <div id="contact-info">
        <strong>Roads Academy Private Limited</strong>
        <br />
        Office No. 4001, Basement, DLF Phase IV, Near, Galleria Market, Gurgaon - 122 009, Haryana
        <br />
        <strong>Phone:</strong>
        +91 85100 66662
        <strong>Email:</strong>
        support@roadsprep.com
    </div>
</div>

CSS：

* {
    font-family: 'Open Sans Condensed', sans-serif;
}
#container {
    background-image: url(http://www.collegify.com/emailer/roads/delhi/images/Promotional-Flyer-for-Delhi-Front-1.jpg);
    background-repeat: no-repeat;
    width: 600px;
    height: 910px;
    margin: 0 auto;
    padding-top: 31px;
}
#social-links {
    margin: 0 0 0 32px;
    float: left;
    width: 200px;
    height: 57px;
    font-size: 13px;
    font-weight: bold;
}
#website-link {
    margin: 0 21px 0 0;
    float: right;
    width: 200px;
    text-align: right;
    font-size: 22px;
    font-weight: bold;
}
#now-at-gurgaon {
    margin: 230px 0 0 128px;
    color: #454b4f;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    width: 181px;
    line-height: 22px;
    font-family: Arial, Helvetica, sans-serif;
}
#gray-box {
    background-color: #454a4e;
    width: 280px;
    height: 80px;
    border-top: solid 1px #1b1d21;
    margin-top: 315px;
    padding-left: 40px;
    font-size: 22px;
    font-weight: bold;
    line-height: 25px;
    color: #fbc911;
}
#pointers {
    width: 280px;
    padding: 0 0 0 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    color: #454a4e;
}
#contact-info {
    border-top: solid 1px #2f3337;
    width: 537px;
    margin: 10px auto 0 auto;
    text-align: center;
    padding-top: 10px;
    line-height: 20px;
    font-size: 17px;
}

Web字体代码：

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>

这在浏览器中完美显示，但它无法在电子邮件中使用。我知道我不能只将代码粘贴到电子邮件中，我需要在浏览器中预览它，直接从那里复制它，然后将其粘贴到电子邮件正文中，但它无法正确显示。我正在使用Gmail。

Answer 1

电子邮件倾向于删除标题内容，因此您不太可能为新字体添加外部链接。

通常，将电子邮件中的html保持尽可能简单，因为它们呈现html的能力有限（尤其是Outlook）。请记住，您（可能）会将其发送给各种电子邮件客户端 - 它们都会略有不同。

这应该有所帮助：https://www.campaignmonitor.com/css/

Answer 2

电子邮件解析/渲染与浏览器完全不同 Outlook使用WORD的渲染引擎！看here
你应该添加你的CSS内联，应该使用表而不是div等建立网站有很多不同！ Gmail呈现的不同，就像Outlook或Lotus一样我记得，我在我的所有图片中添加了style =“display：block”来删除gmail中的边距。看here

测试，测试，测试： - ）

像webfonts一样我会完全删除！

您可以使用很多templates。

还有一些工具，它们会将你所有的css内联。

Answer 3

Float, Padding, Border-Top

不允许使用CSS标签而像DIV这样的标签将无法创建设计，代替电子邮件内容中的div使用Table基本结构

请参阅此链接以获取帮助Guid To CSS Implementation in Email content

Answer 4

雅虎和谷歌等大多数电子邮件服务提供商都没有让你的CSS代码加入。如果你想在电子邮件页面中使用CSS，你应该把它们改成内联样式，这样就可以了。例如：

<div id="container" style="background-image:url(http://www.collegify.com/emailer/roads/delhi/images/Promotional-Flyer-for-Delhi-Front-1.jpg); background-repeat:no-repeat; width:600px; height:910px; margin: 0 auto; padding-top: 31px;">blah blah</div>

Html无法在电子邮件中正确显示

4 个答案: