【问题标题】:how to send styles with html email如何使用 html 电子邮件发送样式
【发布时间】:2014-02-21 08:50:14
【问题描述】:

我正在使用 PHP mail() 函数发送电子邮件。我在电子邮件中有一个特定样式的表格,但是当我收到电子邮件时,它没有显示图像并且所有样式都被打乱了。

我的代码如下:

    $recipient = $_POST['Users']['email'];
    $name   =   $_POST['Users']['first_name'];
    $username   =   $_POST['Users']['username'];
    $password   =   $_SESSION['password'];

    $referrer_name     =    $model->referrer = $referrer_data['first_name'];
    $referrer_email     =    $model->referrer = $referrer_data['email'];
    // print_r($referrer_name);
    // print_r($referrer_email);

    $webstore   =   $this->base_url . "/" . Yii::app()->session['username']; 
    $headers    = 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    $subject    = "Sign Up- Success";
    $message = "<table width='700' border='0' align='center' cellpadding='0' cellspacing='0' class='bordermain'>
  <tr>
    <td align='center' valign='middle'>&nbsp;</td>
  </tr>
  <tr>
    <td align='center' valign='middle'><table width='666' border='0' align='center' cellpadding='0' cellspacing='0'>
      <tr>
        <td width='666' colspan='2' align='center' valign='top'><table width='100%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td width='50%' align='left' valign='middle'><img src='".$this->theme_baseurl."/images/karmora-websiteLogo.png' width='175' height='50'  alt=''/></td>
            <td width='50%' align='right' valign='middle'><table width='120' border='0' cellpadding='0' cellspacing='0'>
              <tr>
                <td width='30' align='center' valign='middle'><a href='http://www.facebook.com/' target='_blank'><img src='".$this->theme_baseurl."/images/facebook.jpg'  alt='Facebook' width='25' height='25' title='Facebook'/></a></td>
                <td width='30' align='center' valign='middle'><a href='http://www.twitter.com/' target='_blank'><img src='".$this->theme_baseurl."/images/twitter.jpg'  alt='Twitter' width='25' height='25' title='Twitter'/></a></td>
                <td width='30' align='center' valign='middle'><a href='http://www.pinterest.com/' target='_blank'><img src='".$this->theme_baseurl."/images/pintrest.jpg'  alt='Pinterest' width='25' height='25' title='Pinterest'/></a></td>
                <td width='30' align='center' valign='middle'><a href='http://www.youtube.com/' target='_blank'><img border='0' width='25' height='25' src='".$this->theme_baseurl."/images/youtube.jpg' alt='YouTube'/></a></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td colspan='2' align='left' valign='middle'>&nbsp;</td>
          </tr>
          </table></td>
      </tr>
      <tr>
        <td colspan='2' align='center' valign='top'><table width='100%' border='0' cellspacing='0' cellpadding='5'>
          <tr>
            <td align='center' valign='middle' bgcolor='#f9f9f9' style='border:1px solid #CCC;'><table width='99%' border='0' cellspacing='0' cellpadding='0'>
              <tr>
                <td><span class='mainheading'><strong>Congratulations</strong></span></td>
              </tr>
            </table></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan='2' align='center' valign='top' bgcolor='#FFFFFF'><table width='100%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td height='20' align='center' valign='middle'></td>
          </tr>
          <tr>
            <td align='center' valign='middle' class='bodytext'><table width='100%' border='0' align='center' cellpadding='0' cellspacing='0'>
              <tr>
                <td valign='top' style='border-top:2px solid #FF7D0F'>&nbsp;</td>
              </tr>
              <tr>
                <td align='left' valign='middle' class='bodytext'><p class='headingpink'><strong>Dear '$name'</strong></p>
                  <p>Congratulations  on your decision to become the newest member of <strong>'$referrer_name' </strong>Karmora Community!</p>
                  <p>Below you will  find important information about your new Karmora Webstore. Please print or save this email in a safe  location for future reference.</p>
                  <table width='400' border='0' cellspacing='0' cellpadding='5'>
                    <tr>
                      <td width='144'><strong><span class='bodytext'>Karmora  URL</span></strong></td>
                      <td width='256'><strong><span class='bodytext'><a href='#'>'$webstore'</a></span></strong></td>
                    </tr>
                    <tr>
                      <td><strong><span class='bodytext'>User  Name</span></strong></td>
                      <td><strong><span class='bodytext'>'$username'</span></strong></td>
                    </tr>
                    <tr>
                      <td><strong><span class='bodytext'>Password</span></strong></td>
                      <td><strong><span class='bodytext'>'$password'</span></strong></td>
                    </tr>
                  </table>
                  <p>Now  it's time for you to start building your own personal Karmora Community where  you can make money off the memberships and purchases of your Community  members!  Let&rsquo;s get this party started!</p>
                  <p class='headingpink'><strong>7 BABY STEPS TO GOOD KARMORA&#8482;:</strong></p>
                  <ol>
                    <li>Click on your Karmora URL and log in to your  back office to customize your Webstore. You will see 'Log In' in the upper right hand corner of your Webstore.</li>
                    <li>Click on the Profile button and upload your  picture while in the profile section. We  recommend recent pictures. Your  customers will want to know that it is your Webstore!</li>
                    <li>Go to the Training Section and watch the  Instructional Videos. You will find all  kinds of information to help you with your Karmora Webstore. </li>
                    <li>Click on the eWallet button and create your  eWallet. Instructions on how to do this  are found in the Training Section of your back office.</li>
                    <li>Use Go Daddy to secure a domain name for your  new Webstore and point the new domain to your Karmora Webstore URL above. Instructions on how to do this are found in  the Training Section of your back office </li>
                    <li>Make your first official Karmora purchase.</li>
                    <li>Start sharing your new Webstore with everyone  you speak to so they can begin a Karmora Community of their own. Once you have five active members in your  Karmora Community your Webstore is basically FREE!</li>
                  </ol>
                  <p>If you have  any questions please don&rsquo;t hesitate to contact <strong>'$referrer_name' </strong>by email at <a href='mailto:$referrer_email'>'$referrer_email'</a> or simply <u><a href='http://karmora.com/liveSupport'>click here</a></u> to chat with a  Good Karmora&#8482; Specialist seven days a week from 7am to 7pm Pacific Time. </p>
                  <p>As always we  wish you Good Luck, Good Fortune and Good Karmora&#8482;! </p>
                  <p>&nbsp;</p>
                  </td>
              </tr>
              <tr>
                <td align='left' valign='middle' style='border-bottom:2px solid #FF7D0F'>&nbsp;</td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align='center' valign='middle' class='bodytext'>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td width='50%' height='70' align='center' valign='middle' bgcolor='#000000' class='footertextwhite' style='border-top:2px solid #de3277; border-bottom: 2px solid #de3277'><table width='90%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td height='40' align='left' valign='middle'><a href='http://karmora.com/contact' class='a1'>Contact Us<br />
            </td>
          </tr>
        </table></td>
        <td width='50%' height='70' align='center' valign='middle' bgcolor='#000000' class='footertextwhite' style='border-top:2px solid #de3277; border-bottom: 2px solid #de3277'><table width='90%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td height='40' align='right' valign='middle'><a href='http://www.karmora.com/liveSupport/'><img src='".$this->theme_baseurl."/images/live_support_icon_03.png' width='110' height='32' /></a><br />
              <span class='footertext'>&copy; 2013 Karmora</span></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan='2' align='center' valign='top'>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>";


        mail($recipient, $subject, $message,$headers);

【问题讨论】:

  • 去掉"\r\n";分配 $headers 时。单个标题不需要分隔符。
  • 这能解决我的问题吗?
  • 没有。很可能不,无论如何你都应该删除它。

标签: php html css email


【解决方案1】:

您可以将样式内联到元素中

<p style="color:#000">...</p>

你应该使用 PHP 标头

$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";    
$headers .= "MIME-Version: 1.0\r\n";

【讨论】:

  • 还有其他方法吗?如果我不想放置内联样式怎么办?
  • 你不能,没有办法通过电子邮件发送样式表
  • 对图像好吗?在我点击下载图片后,它没有在电子邮件中显示图片
  • 所有图片都必须是绝对路径;对于 html 电子邮件,最好将所有内容都放在一个表格中,并据我所知假装它是 1997 年,因为电子邮件程序不能/不能像当前浏览器那样以复杂的方式处理 html。
  • 你试过第二个标题了吗?有时需要完成 HTML 邮件
【解决方案2】:

您不能使用内联以外的 css 并且最好建议您使用基于表格的布局的原因是,某些(如果不是大多数)电子邮件客户端(例如 Outlook)中嵌入了非常非常旧的浏览器版本来显示一个 html 电子邮件。

不幸的是,所有电子邮件都必须像我们在 IE6 或更早的时代一样创建。

至于您的图片未显示,因为您必须记住在阅读电子邮件时它不是您网站上的页面,因此任何图片都必须具有完全定义的域和路径,例如 src="http://www.yoursite.net/images/facebook.jpg

【讨论】:

  • 这里有很好的信息,但稍作修改 - 内联 CSS 适用于 Gmail,而不适用于 Outlook。
  • 较新版本的 Outlook 甚至不使用旧的 IE 引擎。他们正在使用 Microsoft Word 的渲染引擎。
  • 不是每个人都使用 Outlook。 kb.mailchimp.com/article/how-to-code-html-emails
猜你喜欢
  • 2015-04-30
  • 1970-01-01
  • 1970-01-01
  • 2011-01-01
  • 1970-01-01
  • 2012-10-29
  • 2011-02-07
相关资源
最近更新 更多