MY艺科社

邮件模板中css和html设计的一些问题

发布时间:2个月前热度: 40 ℃评论数:

--文章转载自http://blog.wumashi.com/archives/387

http://th7.cn/web/html-css/201612/200179.shtml

邮件模板,请严格按照下面的规则执行。邮件客户端和Web页面的需求不同,在编写代码的时候,考虑的方向也不一样。

!Doctype声明
为了向前兼容和避免某些浏览器的怪癖,使用html5的!doctype声明,格式如下:

原则,及思维出发点
1. 不需要考虑DOM节点的精简和结构的优化。
    以完成设计样式为最优先。必要时,不必吝啬使用表格嵌套,不必吝啬使用空的表格元素来占据空间。

2. 宁可冗余,也不可缺少必要定义。

3. 充分利用表格的私有属性来布局。width, height, bgcolor, background, align, valign等

4. 可替代性:
    在编写html的时候,请思考当你页面的所有图片都被屏蔽时,是否用户还能了解页面的主要内容。
    请务必在所有要设置背景图片的元素上,定义背景颜色。

5. 可利用Dreamweaver等工具来协助编写html,但切记,一定要时候做好每行代码的检查。

Mackup
1. 主体页面,包括细节处理,尽量使用

布局。

2. 不允许在

元素上定义CSS样式,请将样式尽量定义在上的属性)

元素上。(Gmail等邮件客户端会过滤

3. 禁止使用

============================================================

工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则:

1.邮件使用table+css布局

2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联。

如:

<table border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">  <tbody> <tr><td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;"><table width="100%" border="0" cellpadding="5" cellspacing="0" > <tbody><tr> <td> <p style="margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px">                          尊敬的开发者:                        </p> <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;">                         “xxx”在此次的‘网络友好度测试’评级:<span style="color:#F44336;">4颗星</span>(最高5颗星)。                        </p></td></tr> </tbody></table></td>  </tr></tbody></table>



3.不能用浮动的方式定位。position:absolute;float:left;等都不行,float在qq邮箱客户端中可以识别,但是在outlook中无法识别。

4.表格的border,使用table上的border属性,可以在qq浏览器中兼容,但是在outlook中打开是没有边框的,这种情况,我么只能给每一个td加一个border,在table中使用border-collapse:collapse;来合并重复的边框。

如:

<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">



这样设置border会在outlook中显示不出border;

5.为了保证兼容性,需要把邮件的宽度设置为600px,最大600px;

6.少用img,因为很多邮箱客户端默认不显示图片,所以,如果需要图片的话,一定要写好alt和title;

7.背景图片,尽量用background-color使用纯色背景,如果一定要用背景图片,使用background属性,

<div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>



8.邮件不支持javascript,flash以及一些特殊的标签。



由于邮件客户端对css支持各有不同,所以一定要多测试再发送,保证样式的正确。如果出现了不兼容的情况,一定要耐心的使用最简单的方式进行兼容,尽量少用特殊标签及比较复杂的属性。

邮件,设计,一些,问题

手机扫码访问