foxmail客户单发送html活动页面(含链接跳转)邮件(发送 转发)
部门市场部一直在推广活动,所以给了一个需求 发送给客户官网活动页面的宣传邮件,并且要求邮件内的链接可以跳转到官网首页。不是很难,技术也很low,但是有坑~
效果展示:
遇到的问题就是 区域定位的问题
不同的分辨率 展示出来的效果不同。区域按钮会乱。
为了解决这个问题 使用了html一个很老的,已经被遗弃的
<area>
标签的coords
属性
代码展示:
代码是已经foxmail格式化后html代码
<html><head><style class="fox_global_style"> div.fox_html_content {line-height: 1.5;} /* 一些默认样式 */ blockquote {margin-Top: 0px; margin-Bottom: 0px; margin-Left: 0.5em } ol, ul {margin-Top: 0px; margin-Bottom: 0px; list-style-position: inside; } p {margin-Top: 0px; margin-Bottom: 0px } </style></head><body><div><span id="_FoxCURSOR"></span></div><blockquote style="margin-top: 0px; margin-bottom: 0px; margin-left: 0.5em;"><div class="FoxDiv0918102648402156"><div><table width="900" border="0" cellspacing="0" cellpadding="0" style="color: rgb(0, 0, 0); widows: 1; font-size: 12px; font-family: 微软雅黑, 宋体, Arial, Helvetica, sans-serif; margin: 0px auto; padding: 0px; text-align: center; background-position: initial ; background-repeat: initial ;"><tbody><tr><td width="900" height="36">如果您无法查看邮件内容,请<a href="xx" target="_blank" style="text-decoration: none; color: rgb(51, 51, 51);">点击这里</a></td></tr><tr><td width="900" height="1361"><img src="xx" width="900px" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"><area shape="rect" coords="398,980,511,1020" href="xx" target="_blank" alt="Sun" ></area><area shape="rect" coords="398,2080,511,2120" href="xx" target="_blank" alt="Sun"></area></map></td></tr></tbody></table></div><div><br /></div><div><span><div style="MARGIN: 10px; FONT-FAMILY: verdana; FONT-SIZE: 10pt"><div style="font-size: 14px; line-height: 21px; font-family: 微软雅黑;"></div></div></span></div></div></blockquote></body></html>
打开foxmail客户后端 找到 編輯代碼
将代码去掉html标签后 复制到邮件 html编辑器中。返回可视化,就可以看到效果。如果需要修改区域左边,在webStrom中 可以编辑后再粘贴代码。