5

このチュートリアル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:admin@store.com">admin@store.com</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>

私も試しました

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

しかし、それも機能しません。このページにCSSを追加する正しい方法。ありがとうございました

4

1 に答える 1

16

CSS クラスは、電子メール クライアントによって無視されます。Outlook Express などのスタンドアロン クライアントを使用している場合、divも認識されません (依存しないでfloat:leftください)。

HTMLページを次のように変更することをお勧めします-

  1. の外側にあるものをすべてドロップします。<body>...</body>
  2. <table>の代わりに使用<div>
  3. タグを使用<style>してスタイル クラスを定義したり、.css ファイルを使用してスタイルをロードしたりしないでください。代わりに、 /コンテナーstyle="...."内のようにインライン CSS を使用します。<td><table>

これがメール テンプレートの設計に役立つことを願っています。

于 2012-04-25T04:47:21.000 に答える