我正在使用premailer-rails3为html电子邮件提取内联样式的gem,我正在尝试使用Twitter bootstrap.
https://github.com/fphilipe/premailer-rails3
看起来有些样式正确,但不是全部.我想知道是否有人有一个很好的工作示例,将他们的Twitter Bootstrap css(已修改或未修改)转换为HTML电子邮件.
谢谢!
我已经开发了十多年的网站了,但很快就发现,在为电子邮件客户开发时,我开发网络的许多习惯都没用.这让我感到非常沮丧,所以我想我会提出一个问题,希望能够为像我这样的人发现最佳实践和必要的考虑因素,这些人可能会不时地设计gmail,outlook等.
示例: <style>...</style> vs内联CSS.
简而言之:什么从网络世界转移到电子邮件世界,什么没有.
我正在设计一个HTML电子邮件模板,它迫使我使用表格.在下面的代码中,我遇到了问题(1)删除了占位符图像下面的间距,以及(2)删除了图像和标题之间的空格.以下是OS X 10.6.8上Chrome 15的外观截图:

<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
<tr>
<td id="main" style="background-color: #f2f2f2;">
<h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
<tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用基本64位数据URL编码的图像在HTML中进行签名.这是一个例子:
<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">
Run Code Online (Sandbox Code Playgroud)
它适用于邮件软件,如Mac或Thunderbird上的Mail,但它不能使用gmail,outlook,roundcube,hotmail等网络邮件...
你知道如何让它工作吗?我真的想把这些图像直接放在源代码中,它更实用.
我有一个PHP脚本,通过邮件发送以下HTML:
<html class="no-js" lang="en">
<body>
<div style="width: 70%;background-color: #060b2b;margin: auto;flex-direction: column;display: flex;">
<h1 style="margin-top: 50px;color: white;margin-left: auto;margin-right: auto;">Vous avez reçu une nouvelle notification.</h1>
<div style="width: 80%;padding: 50px;margin-top: 50px;background-color: #222;margin-left: auto;margin-right: auto;display: flex;">
<p style="color:white;margin: auto;text-align: center;">{{$notification}}</p>
</div>
<a href="" style="margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;color: white;padding:15px;background-color: #0E0E0E;">Accéder à mon compte</a>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
但收到的电子邮件(当我检查主要div时)并未显示该属性 flex-direction: column;
似乎gmail过滤了那些属性?
这是正常的吗?
伙计们我试图通过SMTP服务器发送邮件.我正在使用此代码发送邮件,
using(System.Net.Mail.MailMessage message = new System.Net.Mail.MailMessage())
{
message.To.Add(textBox1.Text); //TextBox1 = Send To
message.Subject = textBox2.Text; //TextBox2 = Subject
message.From = new System.Net.Mail.MailAddress("email id");
message.Body = textBox3.Text; //TextBox3 = Message Body
using(System.Net.Mail.SmtpClient smtp = new System.Net.Mail.SmtpClient())
{
smtp.Host = "smtp.server.com";
smtp.Credentials = new System.Net.NetworkCredential("user", "pass");
smtp.Send(message);
}
}
Run Code Online (Sandbox Code Playgroud)
现在这段代码完美无缺.现在我想在邮件正文中发送一个完整的表单,比如选择多个文本框的值.这是表格,我想通过邮件发送:

如何设计消息模板,以便它可以发送包含您在上面的表单中看到的所有值的正文的消息?
我正在使用 nodemailer 和车把发送电子邮件,我正确收到电子邮件,但未应用样式。
这是我发送电子邮件的代码:
const hbsConfig = {
viewEngine: {
extName: '.hbs',
partialsDir: path.join(__dirname, '../../../../src/modules/hq-nd/templates/'),
layoutsDir: path.join(__dirname, '../../../../src/modules/hq-nd/templates/'),
defaultLayout: ''
},
viewPath: path.join(__dirname, '../../../../src/modules/hq-nd/templates/'),
extName: '.hbs'
};
const transporter = nodemailer.createTransport({
host: 'smtp.sendgrid.net',
port: 465,
secure: true,
auth: {
user: 'zzz',
pass: process.env.SENDGRID_SECRET,
},
});
transporter.use('compile', hbs(hbsConfig));
const email = {
from: "Boxtribe <123@gmail.com>",
to: params.username,
subject: 'Reset your zzz Password',
template: 'forgot-password',
context: {
...user,
token: tokenRes.token,
url: process.env.HARMONY_URL
}
};
const response = await transporter.sendMail(email as Mail.Options);
Run Code Online (Sandbox Code Playgroud)
这是我的模板: …
我正在尝试从我的 PHP 脚本发送电子邮件。电子邮件通过 cron 作业自动发送。但是当我收到电子邮件时,引导程序设计已经中断。我正在链接以下 jquery 和 bootstrap 文件;
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
Run Code Online (Sandbox Code Playgroud)
我猜 gmail 会阻止外部 css。哪个是最好的工作方式?
html-email ×4
css ×3
html ×3
php ×2
.net ×1
base64 ×1
c# ×1
css-grid ×1
email ×1
flexbox ×1
format ×1
gmail ×1
html-table ×1
javascript ×1
node.js ×1
nodemailer ×1
sendmail ×1
typescript ×1
webmail ×1
winforms ×1