java 使用 Velocity 生成基于 HTML 的电子邮件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10296667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-31 00:26:20  来源:igfitidea点击:

Use Velocity to generate HTML based email

javacssvelocity

提问by Mahadi Siregar

I try this tutorials http://www.java2s.com/Code/Java/Velocity/UseVelocitytogenerateHTMLbasedemail.htmbut, when i add css, it look like not executed.

我试试这个教程http://www.java2s.com/Code/Java/Velocity/UseVelocitytogenerateHTMLbasedemail.htm但是,当我添加 css 时,它看起来好像没有执行。

<HTML>
<HEAD>
  <TITLE>Pet Store Sale!</TITLE>
  <style type="text/css">
    body    {
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            text-align: center; 
            background-color: #FFF;
            border-top: 3px solid #CCC;
            }


    #container  {
                position: relative;
                width: 860px;
                height: 1600px;
                margin: 84 auto 0 auto;
                padding: 0 0 0 0;
                background-color: #FFF;
                }


    p       {
            font-family: times, Times New Roman, times-roman, georgia, serif;
            color: #444;
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            text-align: center;
            }


    .woodtwo        {
                    font-size: 22px;
                    line-height: 46px;
                    letter-spacing: -1px;
                    }


    .eyebrow        {   
                    font-size: 19px;
                    line-height: 29px;
                    }


    .caps           {
                    font-size: 14px;
                    line-height: 20px;
                    text-transform: uppercase;
                    }


    .copyone        {
                    font-size: 16px;
                    line-height: 20px;
                    }


    #line           {
                    border-bottom: 1px solid #CCC;
                    width: 748px;
                    margin: 10 0 20 56;
                    }



    #break          {
                    height: 30px;
                    }


    a:link          { color: #B95E27; text-decoration: none; } 
    a:visited       { color: #B95E27; text-decoration: none; }
    a:active        { color: #1A69A1; text-decoration: none; } 
    a:hover         { color: #888; text-decoration: none;}


    .grey           { color: #888; }


    .smallcaps      { font-size: 88%; }


</style>
</HEAD>
<BODY>

<div id="container">
    <p class="caps"><a href="">From Pet Store Sale</a></p>
    <div id="line"></div>
    <p class="eyebrow">
        <span class="grey">*</span>T<span class="smallcaps">HANK YOU FOR JOINING </span>P<span class="smallcaps">ET</span> S<span class="smallcaps">TORE</span> S<span class="smallcaps">ALE</span> A<span class="smallcaps">PPLICATION</span><span class="grey">*</span>
    </p>
    <p class="copyone">
        <i>You received this email because your registration process in Pet Store Sale is successful.<br/>
        To Confirm your registration, please visit this link <a href ="$link">Confirmation Link</a>.<br/>
        Your username : $username<br/>
        Password : $password<br/>
        If you have any questions about Application, please send an email to <a href="mailto:[email protected]">[email protected]</a></i> 
        <br><br><b>THANK YOU</b>
    </p>
    <div id="break"></div>

    <p class="woodtwo">
        <a href="">GETTING STARTED</a>
    <div id="line"></div>
    <div id="line"></div>
</div>

</BODY>
</HTML>

i've also tried

我也试过

<link rel="stylesheet" href="./style/css/emailFormat.css" type="text/css"  media="screen" />

but it not work too. how the right way to add css on to this page. Thank you

但它也不起作用。如何在此页面上添加 css 的正确方法。谢谢

回答by tusar

CSS classes are ignored by email clients. If you are using standalone clients like Outlook Express, divs will also not be recognized (dont depend on float:left).

电子邮件客户端会忽略 CSS 类。如果您使用 Outlook Express 等独立客户端,divs 也将无法识别(不依赖于float:left)。

I suggest you to change your HTML page like -

我建议你改变你的 HTML 页面,比如 -

  1. Drop everything outside the <body>...</body>
  2. Use <table>instead of <div>
  3. Dont use <style>tags to define style-classes, or .css file to load styles. Instead use inline css like style="...."inside the <td>/ <table>containers.
  1. 把一切都扔在外面 <body>...</body>
  2. 使用<table>代替<div>
  3. 不要使用<style>标签来定义样式类,或使用 .css 文件来加载样式。而是style="...."<td>/<table>容器内使用内联 css 。

Hope this helps you in email template designing.

希望这可以帮助您进行电子邮件模板设计。