姬小光前端兴趣班【第009期】- 切图大法之代码的整理
上一期我们已经学会了使用 PS 切图并生成网页，那么这一期我们看看生成后的代码如何处理，才能变成一个合格的网页。
切图大法之代码的整理
由于我们上一期使用的是一个邮件营销活动的页面，也就是说要通过邮件的形式发送给用户，在用户的邮箱里打开浏览的网页。
邮件客户端或者网页版的邮箱系统，对网页都有诸多限制，比如不能用绝对定位，不能用内联样式（后续课程讲解）等。
所以表格布局再加上一点行内样式（回复 003），是最稳妥的方式。
让我们用第四期（回复 004）让大家下载的编辑器，或者其他可以编辑文本的软件，打开上一期生成的 htm 文件：
大家可以看到，这里面的代码我们已经基本能看懂了。
我们之前学过文档类型只需要写 <!doctype html> 即可，那么首先我们把头部的文档类型改掉。再把多余的注释删掉，并整理代码：
现在我们打开页面看一下：
你会发现页面内容是在窗口的左侧，这是由于页面内容比窗口的宽度窄，而我们又没有设置居中样式造成的。
那么，页面的主体内容是 table 元素，我们就在 table 上添加一个居中的样式：
保存并刷新页面，可以看到内容已经可以居中了：
此处的 margin 代表元素的外边距，第一个 0 代表上下的外边距是 0，第二个 auto 代表左右的外边距是 auto 自动，所以可以左右居中。
对于一个营销邮件，一定是要有链接来引导用户去我们真正的网站的，所以下面，我们来给页面加一些链接。
代码中的五个 img 就是我们上一期切出的切片，假设我么要在优惠券上加一个链接，那么按顺序可以知道这是第三个 img，故我们在第三个 img 外面套上一层超链接，假设链接到百度首页：
再次保存后，当我们点击优惠券区域时候，页面就跳转到了百度首页。
有了以上这些步骤，这个营销邮件基本上就可以使用了。
不过还有一些小细节要处理，比如 img 标签在某些邮件客户端里会有蓝色边框，底部也会有一个小间距。这时我们需要给所有的 img 边框加上如下的样式：
或者：
最终的效果是一样的，之所以用 display 和 vertical-align 的区别，是因为 img 元素本身是行内元素，在一行之中是以基线对齐的，所以基线之下的部分会有一个小空隙，关于这些细节知识，我们以后再慢慢讲解。
另外还有一个问题是，我们的图片都是相对路径：
如果发送邮件时没有以附件形式带过去，这些图片在客户端是无法显示的，所以我们必须找到一个可以上传图片的地方，把它们发布到网上去，然后得到一个绝对路径的地址，再嵌入的页面中就可以了。
没有了解过服务器和虚拟主机的同学，可以使用又拍云之类的上传图片，得到的地址替换这个相对地址即可。
好了，到这一期为止，切图大法就讲完了。产品和运营同学可以按照这些步骤独立完成邮件营销页面了。
腾讯云开发者
