码迷,mamicode.com
首页 > 其他好文 > 详细

邮件模板——开发篇

时间:2016-03-21 10:45:59      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:

  其实网上有关于邮件模板开发的文章其实不少,但是都是面向开发人员的,对于非技术的同事有一定的门槛,因此我将邮件模板系列分为三个部分,以便朋友们能更快的找到自己需要的。前两篇文章 “科普篇”“基础篇”分别面向产品设计同事和零基础的使用邮件模板的同事,下面的“开发篇”主要是面向邮件模板的前端开发的同事。“开发篇”参考了不少网上的文章,结合我在开发中遇到的一些坑,做了一些汇总:

html:  

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

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

  3、主体页面,包括细节处理,尽量使用<table>布局。

  4、不允许在<tr>元素上定义CSS样式,请将样式尽量定义在<td>元素上。(Gmail等邮件客户端会过滤<tr>上的属性)

  5、禁止使用<style  type=”text/css”>来处理主要样式,所有的Web邮件系统都会过滤该标签。因此邮件模板中不能使用伪类(pseudo  class)和伪元素(pseudo  elements),以及高级选择符。

  6、禁止使用<link>来加载外联CSS

  7、可以使用<div>来实现细节的,具有典型块级元素(block)的布局样式。而尽量避免使用<p>,因为我们不容易清除<p>在不同浏览器的默认样式

  8、注意定义图片的替换文字(alt),及替换文字的颜色。

 

css:

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

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

  3、文字的处理。font-*  族的CSS属性不允许使用缩写,请分别定义  font-size,  font-weight,  line-height,  font-family(font-family有可能被过滤)

  4、注意表格不会继承外部的font等属性,请务必,在每个<td>元素上都定义字体属性和颜色。

  5、背景的处理  不允许使用style=”background:url(http://…)”,请使用<td>的属性(attribute)  background=“http://…”。(由于CSS背景图片是一种会影响页面渲染速度的定义,因此大多数Web邮件系统会过滤它。)  背景颜色,也请使用表格的bgcolor属性。实际使用中,尽可能不要出现背景图,上面有文字的处理结构。建议将文字合成到图片上,再加载到<img>标签上。

  6、避免尝试让两个table-cell的元素对齐,如果,  一个元素是用具体的宽度定义(width=”100″),另一个元素是用百分比来定位(  width=”50%”)

  7、避免使用list-style来处理列表样式,请使用  “  •  ”  字符来替代。

  8、禁止使用  position,  background,  float

  9、margin:  margin的使用要非常谨慎,不允许使用margin作为重要的布局依据,不允许使用负margin,避免使用非零和非auto的margin属性。

  10、<a>  在  body上定义style=”width:apx;  margin:auto”。注意,在Web邮件中,会自动为你生成一个<div  style=”width:apx;  margin:auto”>  的元素在最外层。(可以有效利用这一特性,定义背景颜色等样式,和实现其他可能的事情)  而不要尝试自己在邮件模板最外层添加一个带有margin:auto的<div>元素。  <b>  使用<center>

  11、要使用完整的6个完整的十六进制编码,如果使用三个简写字符,不总是有效

  

邮件模板——开发篇

标签:

原文地址:http://www.cnblogs.com/webARM/p/5300644.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!