方案一
缺点,客户端手机app应用不支持,媒体查询,放弃
link: https://get.foundation/emails/docs/alignment.html
row: 行
row class="collapse"去掉列里的间距
column: 12份
small="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需求模版
邮件模版
找接近需求的免费的邮箱模版
再编辑加工,导出html或者chrome邮箱
chrome邮箱,找草稿,
手工打造
https://www.youtube.com/watch?v=_G5OuTmuU0Q
yutobe视频教学
问题总结
- web支持媒体查询,但是手机app应用不支持,所以不用媒体查询
- 有个别,邮箱使用了,媒体查询,但是在手机app应用不支持,所以手机网页打开,和手机app应用打开表现不一致
- 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图片
[图片]
方案三
整张图片可以点击,图片上的按钮,提示用户可以点击,其实整张图片都可以点
[图片]