2009-07-27 105 views
2

我正在尝试使用DIV而不是表格来构建HTML电子邮件,而且我对CSS还很陌生。使用CSS的HTML电子邮件

我试图实现看起来是这样的:

******************* XXXXXXXXXXXX XXXXXXXXXXX 
* image here * XXXXXXXXXXXX XXXXXXXXXXX 
******************* XXXXXXXXXXXX XXXXXXXXXXX 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 

X =某些文本

1图像+ 5行文字

任何想法的?

+0

每个子部分中的文本是另一个子部分中文本的延续部分吗?如果是这样,盒子的填充顺序是什么? (我想象一个中心盒,一个右上盒和一个底盒)。 – 2009-07-27 19:01:13

+0

思南,他们是子部分 – Atlas 2009-07-27 19:04:08

回答

17

电子邮件是其中的一个地方,无论你有什么样的布局良好实践的想法应该被抛出窗口。许多电子邮件提供商会过滤掉您输入的任何CSS规则,因此,如果您绝对需要在电子邮件中使用“复杂”布局,最好的办法是坚持使用旧式学校桌,因为它们会使您距离您的电子邮件最近正确传递给所有用户。

+3

我是CSS合规拉拉队长/狂热分子,我不得不同意。 – 2009-07-27 19:06:06

+2

Gmail特别只允许使用style属性应用的CSS。 – Rafe 2009-07-27 19:19:43

1

电子邮件客户端的CSS支持不是很标准化。人们普遍接受使用html 4属性替代HTML电子邮件中的CSS。

4

精心设计的电子邮件是超级棘手。一般来说,你可以假定电子邮件客户端不会拉入外部链接的CSS文件(或者至少不正确),并且他们会对你的HTML进行一些操作(通常只是属性并添加一些额外的标记)。但是,这不是一个坚持所有最佳实践的地方,当然也无处可以“学习”良好的标记或CSS设计。

一般来说,HTML电子邮件遵循网页设计的最坏规则。这两个大的事情要记住的:

  1. 使用HTML表格进行复杂的布局(与列的任何东西)
  2. 使用内联CSS样式(甚至嵌入CSS样式 - 这些放在文件的头部 - - 可能不会在大多数电子邮件客户端正确地呈现)

它也是一个好主意,把你的客户抛弃花哨的电子邮件通讯赞成这是一个更容易获得一个精心设计的纯文本电子邮件更广泛的平台。引用用于电子邮件访问的移动设备的兴​​起是这样做的主要原因,尽管对最终用户的好处是遥远的。

This SitePoint article总结的方法很好。

0

作为大型广告公司的员工,他为大名鼎鼎的客户做了大量的html电子邮件,我会说他们很混乱!

使用嵌套表格进行布局。我甚至使用白色(或电子邮件背景色)1x1像素间隔图像几乎所有的空白和东西(因为填充和边距不会总是正常工作。)

就像有些人以前说过的,内联样式是唯一可以依赖的样式,但即使对于这些样式,'背景图片'也会被忽略。

只要客户端没有请求任何形式的动态文本,我也会在我的大部分文本中使用图像,以避免任何字体或大小问题。

地狱,如果可以的话,就把这些东西剪成几个大的图像发送出去。

1

每个人的反应都很好。 Campaign Monitor和http://www.email-standards.org是他们现在最好的资源。

但是,当我做第一个html电子邮件时,一位开发人员告诉我 - “代码就像它的1997年”。