用HTML+CSS制作邮件网页的技巧总结

在进行邮件营销时，我们都期望用户打开后看到的邮件内容如同在浏览器中打开的网页一样完整和吸引人。我们必须认识到对HTML页面的渲染能力与浏览器相比存在显著差异，其渲染能力相对有限。在设计并制作网页邮件时，狼蚁SEO提醒我们需要注意以下几点。

背景图片的使用是一大禁忌。无论形式如何，邮件中都不应使用背景图片。样式要直接写入HTML代码中，例如使用内联样式如"style="text-decoration:none; color:666; font-size:12px;"。尽管将样式包含在""标签内并放在body中可以起作用，但在邮件转发过程中部分样式可能会丢失。谨慎使用此方法。

第三，每个图片都应配备alt和title属性，这有助于提高邮件的可读性和搜索引擎优化。第四，邮件的宽度至关重要。考虑到许多用户在使用笔记本电脑，分辨率通常为1280708，为了给予用户良好的第一眼体验，必须设定合适的邮件宽度。

所有图片都应使用绝对地址。相对地址在客户终端可能无法正确显示图片，但在Foxmail中可能正常。在布局设计方面，建议使用table标签而非div。因为中的css属性支持不全面，甚至基本的布局属性如"margin:0 auto"都可能失效。为了确保兼容性，使用table布局更为稳妥。

每个块都应设定宽度。未设定宽度的块可能会出现意外的bug。邮件的显示效果应以为准。浏览器和的渲染效果可能存在差异，需特别注意。

在此，我们特别提醒：当窗口缩小到一定程度时，部分图片可能会缩小，页面边界可能不整齐。这是由的渲染规则决定的，目前的设计尚无法规避这一问题。为了优化用户体验，建议将邮件宽度设置得稍小一些。我们测试网易中心发的系统邮件时，也发现了这个问题，所以需提前告知用户并注意调整设计细节。（cambrian.render('body')）