前端邮箱模版开发实现

方案一

缺点,客户端手机app应用不支持,媒体查询,放弃

link: https://get.foundation/emails/docs/alignment.html
row: 行
  row class="collapse"去掉列里的间距

column: 12small="12" large="6"(大屏占一半,小屏占全屏)
  class="large-offset-3"  列的左侧添加间距
  .first .last 给第一列和最后一列添加padding的

Typography排版: 段落,标题,小标题,链接,分屏器,sass参考

Alignment 对齐方式
  文字对其方式
  img的对其方式
  按钮剧中
  菜单剧中
  列垂直居中
  列水平剧中
  Centering Columns(剧中列)
    <columns small="7">设置列,占的宽度

VisibilityClasses: 媒体查询,控制大小屏的显示和隐藏

callout: 是一个框子

wrapper: 全宽背景

button:size,expanded(展开的),color,radius

container: 放内容的盒子,一般外部使用wrapper包装
          所有电子邮件都应该有一个容器元素。
          这为电子邮件客户端在大屏幕上提供了最大宽度。
          它还将电子邮件定位在中心。

h-line: 分屏,横线

Thumbnail缩略图: 

Spacer垫片:

menu菜单:

参考链接
黑猩猩邮件模版,一些电子邮件基础知识和模版

常用邮箱css兼容文档

前端高质量邮件信开发实现

HTML 文件在PC&移动端完美自适应布局的技巧

HTML邮件多平台适配

测试发送邮箱

EDM需求模版

邮件模版

stripo.email模版

sendblue免费模版

找接近需求的免费的邮箱模版
再编辑加工,导出html或者chrome邮箱
chrome邮箱,找草稿,


手工打造

https://www.youtube.com/watch?v=_G5OuTmuU0Q
yutobe视频教学

问题总结

  1. web支持媒体查询,但是手机app应用不支持,所以不用媒体查询
  2. 有个别,邮箱使用了,媒体查询,但是在手机app应用不支持,所以手机网页打开,和手机app应用打开表现不一致
  3. banner,图片上放按钮,不支持,position属性支持不友好,没有层级概念

方案一

https://mail.qq.com/cgi-bin/frame_html?sid=MTGHYhCjX3vxR2UG&r=01be8e7c84509d9829d3b2327714aa45&lang=zh
层级关系,margin -100px 顶上去的,如果为按钮的背景色,层级会在图片之下,
按钮为一张图片,用a标签包裹,用margin顶上去
[图片]

方案二

https://mail.qq.com/cgi-bin/frame_html?sid=MTGHYhCjX3vxR2UG&r=01be8e7c84509d9829d3b2327714aa45&lang=zh
背景色和图片组合看起来,像是banner图片
[图片]

方案三

整张图片可以点击,图片上的按钮,提示用户可以点击,其实整张图片都可以点
[图片]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值