前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >姬小光前端兴趣班【第009期】- 切图大法之代码的整理

姬小光前端兴趣班【第009期】- 切图大法之代码的整理

作者头像
姬小光
发布2018-09-05 10:15:23
4060
发布2018-09-05 10:15:23
举报
文章被收录于专栏:姬小光

上一期我们已经学会了使用 PS 切图并生成网页,那么这一期我们看看生成后的代码如何处理,才能变成一个合格的网页。

切图大法之代码的整理

由于我们上一期使用的是一个邮件营销活动的页面,也就是说要通过邮件的形式发送给用户,在用户的邮箱里打开浏览的网页。

邮件客户端或者网页版的邮箱系统,对网页都有诸多限制,比如不能用绝对定位,不能用内联样式(后续课程讲解)等。

所以表格布局再加上一点行内样式(回复 003),是最稳妥的方式。

让我们用第四期(回复 004)让大家下载的编辑器,或者其他可以编辑文本的软件,打开上一期生成的 htm 文件:

大家可以看到,这里面的代码我们已经基本能看懂了。

我们之前学过文档类型只需要写 <!doctype html> 即可,那么首先我们把头部的文档类型改掉。再把多余的注释删掉,并整理代码:

现在我们打开页面看一下:

你会发现页面内容是在窗口的左侧,这是由于页面内容比窗口的宽度窄,而我们又没有设置居中样式造成的。

那么,页面的主体内容是 table 元素,我们就在 table 上添加一个居中的样式:

保存并刷新页面,可以看到内容已经可以居中了:

此处的 margin 代表元素的外边距,第一个 0 代表上下的外边距是 0,第二个 auto 代表左右的外边距是 auto 自动,所以可以左右居中。

对于一个营销邮件,一定是要有链接来引导用户去我们真正的网站的,所以下面,我们来给页面加一些链接。

代码中的五个 img 就是我们上一期切出的切片,假设我么要在优惠券上加一个链接,那么按顺序可以知道这是第三个 img,故我们在第三个 img 外面套上一层超链接,假设链接到百度首页:

再次保存后,当我们点击优惠券区域时候,页面就跳转到了百度首页。

有了以上这些步骤,这个营销邮件基本上就可以使用了。

不过还有一些小细节要处理,比如 img 标签在某些邮件客户端里会有蓝色边框,底部也会有一个小间距。这时我们需要给所有的 img 边框加上如下的样式:

或者:

最终的效果是一样的,之所以用 display 和 vertical-align 的区别,是因为 img 元素本身是行内元素,在一行之中是以基线对齐的,所以基线之下的部分会有一个小空隙,关于这些细节知识,我们以后再慢慢讲解。

另外还有一个问题是,我们的图片都是相对路径:

如果发送邮件时没有以附件形式带过去,这些图片在客户端是无法显示的,所以我们必须找到一个可以上传图片的地方,把它们发布到网上去,然后得到一个绝对路径的地址,再嵌入的页面中就可以了。

没有了解过服务器和虚拟主机的同学,可以使用又拍云之类的上传图片,得到的地址替换这个相对地址即可。

好了,到这一期为止,切图大法就讲完了。产品和运营同学可以按照这些步骤独立完成邮件营销页面了。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-07-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 姬小光 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
邮件推送
邮件推送(Simple Email Service,SES)是一款基于腾讯云端的平台化服务, 为企业提供安全稳定、简单快速、精准高效的营销、通知和事务邮件的推送服务。产品提供灵活的 IP 部署、电子邮件身份验证以及企业专属定制的启动计划,以保护发件人声誉,同时提供精准智能的数据分析。产品的服务范围覆盖200+国家/地区,可即时触达全球各地的邮箱地址。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档