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

  我们在做邮件营销的时候,都希望用户打开邮箱后看到我们发给对方是一个完整的网页页面,但是邮箱对HTML页面的渲染与在浏览器中的渲染不同,渲染能力小了很多,在浏览器中正常显示的效果,在邮件中却会出错,或者无法渲染。

  1、不能使用任何形式的背景图片;

  2、样式要写到HTML代码中,类似于style="text-decoration:none;color:#666;font- size:12px;",另外<'style><'/style>中的样式必须放在body中才能起作用,但是在转发的过程中部分样式会丢失,所以不建议使用

  3、在每个图片都要加上alt和title

  4、要考虑邮件的宽度,很多用户是在用笔记本,笔记本的分辨率是1280*708,。。。所以为了第一眼的良好用户体验,必须有合适的宽度

  5、所有图片都必须用绝对地址,否则在客户终端不会显示,在foxmail中可以显示;

  6、在布局上,用table,不用div,因为在邮箱中连margin:0auto都不起作用,css属性没有全部测试,但是真的很受限制,那么就用table吧;

  7、尽量每个块都要加上宽度,不写宽度,会有莫名奇妙的bug;

  8、显示效果以邮箱为准,有些情况浏览器渲染的页面效果和邮箱渲染的不一样;

  风险提示:

  在缩小窗口至很一定程度时,部分图片会缩小,页面边界会不整齐,这是邮箱的渲染规则,就目前的设计,这个bug没法规避,所以宽度只能改小点(测试网易邮箱中心发的系统邮件,也存在这个问题)。

时间: 2024-10-27 06:03:08

用HTML+CSS制作邮件网页的技巧总结的相关文章

一个用纯CSS制作的网页下拉菜单

网页特效代码实例:一个用纯CSS制作的网页下拉菜单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[ <!ELEMENT a (#PCDATA | table)* > ]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang

DIV+CSS制作的网页如何让网页居中

 我写网页是包在一个叫 #container 的DIV中的,所以这里主要讲一下BODY与#container之间的关系.     先看一下body的CSS样式:     body{ margin:0;padding:0;text-align:center;}     这里的body把margin与padding设置为0,这样就把body内容与浏览器边缘亲密接触.然后text-align:center 把body的内容全部居中,这样就包括了#container也一起居中了.     再来看一下#c

纯CSS制作的网页中的lightbox效果

"Lightbox"是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口.lightbox效果网络上有很多js版本的介绍.不过都下载一个lightbox的js小则几十K,大则上百K.如果你只是需要一个类似Lightbox的效果,这种百分之百纯CSS制造,不含js的办法倒是可以试试. 以下是引用片段:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><ht

CSS制作网页时的优化与技巧

css|技巧|网页|优化 使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 区分大小写

CSS网页设计实例:设计制作大背景网页

网页制作Webjx文章简介:如何用CSS实现大背景网页设计. 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片

你知道这些css网页设计技巧吗

css|技巧|设计|网页|网页设计 本翻译并未得到作者或网站授权.一切权利都归原作者及原网站所有.如果你得到原作者或原发表网站的授权,可以自由使用本翻译. 1.CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去:

使用DIV+CSS制作网页后,表格Table还有用吗?

css|网页 符合网页标准的网页是DIV+CSS制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很

DIV CSS网页代码学习:2个小时学会CSS制作网页

文章简介:2个小时学会CSS制作网页. 第一步:规划网站,本教程将以图示为例构建网站 1.规划网站,本教程将以下图为例构建网站. 其基本布局见下图: 主要由五个部分构成: 1.Main Navigation 导航条,具有按钮特效. Width: 760px Height: 50px 2.Header 网站头部图标,包含网站的logo和站名. Width: 760px Height: 150px 3.Content 网站的主要内容. Width: 480px Height: Changes dep

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu