HTML中使用CSS的不二秘籍

在Email中防御性地使用HTML5和CSS3的指南

2015/04/20 · CSS,
HTML5 · 1
评论 ·
Email

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,禁止转载!
英文出处:litmus.com。欢迎加入翻译组。

“在Email中不能使用HTML5或CSS3”。

由于它们“有限”的支持,这已成为邮件设计行业的一个普遍共识。然而,我们现在可以说它是一个完全荒唐的说法。

尽管支持还不是十分通用的,但许多主流电邮客户端已经可以支持HTML5和CSS3了。实际上,电邮总体市场的50%都支持HTML5和CSS。前五大电邮客户端中也有3家开始支持它们了。对于特定顾客,可支持的内容可能会更多。

威尼斯手机棋牌,但是,那些还不能支持这些高级功能的客户端会怎么样呢?你的邮件在这样的订阅者的邮箱中该如何展示?当这些涉及到邮箱,就归结为一个:为订阅者提供非凡的体验。然而,这也不意味着你的邮件必须在每一家客户端中都显示的一样——只需要让你的所有订阅者都能易得易取。

我喜欢的两位邮件设计师——Jonathan Kim 和 Brian
Graves——就十分强调使用不同的方法实现:防御性邮件设计和渐进式增强。

防御性邮箱设计

大概两年前, Jonathan
Kim在我们的 Mobile
Master 作品展上提出了“Pushing the Limits of
Email”的概念。在谈话中,Jonathan发明了一个新词来说明当前的电邮设计状态,即防御性邮件设计。

他解释说,由于一些邮箱客户端对CSS的支持有限,使得邮件设计者们陷入了陈旧的设计状态。他倡导邮件设计者们优先为那些支持网络渲染引擎的客户端设计,进而推动邮件设计行业发展。

渐进式增强

以此类推,在2014年的邮箱设计大会上,DEG的UI设计师,
Brian
Graves,,提出了“赢得在每个屏幕上设计的战斗”。他的谈话的重点在于渐进式增强,关于在支持的环境上提供高级功能。他也强调了优雅降级的重要性。优雅降级意味着,即使订阅者的邮箱客户端不能支持某项特定功能,你也要能为他们提供愉悦的用户体验。

对获得Brian的完整展示感兴趣?幻灯片和录像现在都有提供了。

自动楼梯就是实际生活中一个渐进式增强和优雅降级的完美例子。已故喜剧演员Mitch
Hedberg开玩笑说,“自动扶梯永远不会出故障:因为它可以只是一个楼梯。你应该永远也不会看到‘自动扶梯暂时故障’的标牌,只是‘自动扶梯暂时为楼梯’,不利于方便。”不论环境如何,自动扶梯都能保持自己的功能。

为HTML5和CSS3实现渐进式增强

使用渐进式增强是解决邮件设计的最有效方式。我们都知道的是,在邮箱中使用传统的HTML5和CSS3会在不同客户端之间引起许多渲染问题。向后的兼容性非常不一致——一些HTML和CSS有稳固的向后兼容性而其他的却并没有。对此,不同的客户端采用了不同选择。使用标准的HTML5和CSS3需要更多的测试,而且会影响开发速度。所以,到底什么才是在邮箱中实现渐进式增强的最好方法?

在电邮中使用HTML5和CSS3不必太困难。它不要求在古怪的邮箱客户端上浪费大量时间排除故障(说的就是Outlook邮箱)。它所需要做的就是用一个合适的框架来快速执行HTML5和CSS3而不用烦恼和担心产生渲染问题。而且,非常幸运的是,我们有那样的框架。

下面就是邮件设计者们和开发者们提供的一行重要的代码:

XHTML

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

这个媒体查询只针对支持WebKit的邮箱客户端——对HTML5和CSS3有难以置信的支持度。这个媒体查询允许你使用现代技术例如HTML5视频、CSS3动画、web字体以及更多。

这个方法也将现代邮件客户端和旧式客户端的邮箱开发分为两部分。你可以在使用Safari或Chrome浏览器为支持WebKit的客户端测试开发现代技术的同时,使用Firefox为旧式浏览器提供诸如外观之类的基本体验。

威尼斯人国际网址,这样解决电邮开发问题可以将更多的质量控制过程转移到浏览器方面而不是电邮客户端。这给予邮件设计者以更多的权力,控制力,和自信去开发一个能在所有邮箱客户端之间优雅渲染的电邮。

下载这些Litmus测试结果,显示了就媒体查询对WebKit的支持。值得注意的是,Gmail——既是一个web邮箱客户端,也是一个移动App——并不支持媒体查询,所以这些测试对那些屏幕截图无效。

你也可以针对Gecko(Firefox)渲染这个媒体查询:

XHTML

@-moz-document url-prefix() { /* Insert styles here */ }

1
2
3
@-moz-document url-prefix() {
  /* Insert styles here */
}

很少有客户端使用Gecko(Firefox)作为渲染引擎,这也是为什么最好就支持WebKit的邮箱提供你的增强版。但是,使用媒体查询为WebKit渲染引擎添加同样的功能就简单的多了,对Thunderbird之类的客户端而言。

除了这个方法,还有其他在电邮中实现HTML5和CSS3的方法吗?有。但我们相信这个方法是开发的最迅速的方法——也是最安全的。它缩小了为特殊邮箱客户端开发外观之类需要的工作量,而且集中于基于浏览器的测试。

总结:渐进式增强的建议

了解你的受众

订阅者在哪里打开你的邮件?他们会使用对HTML和CSS支持的很好的如iPhone和AppleMail之类的客户端吗?你可以使用Litmus’
Email
Analytics测试工具检测出订阅者中最流行的邮箱App。

基于所获得的信息,你可以决定是否渐进式增强会对你的工作有帮助。例如,如果你的受众中绝大部分使用WebKit,能够很好的支持高级功能,那么可能尝试创新性的技术,比如HTML5
视频,会是一个不错的想法!

建立一个基本体验

用对HTML和CSS支持有限的邮箱App——如Outlook和Gmail,在你为其他客户端优化邮件之前,为订阅者建立一个基本体验。渐进式增强不应该让其他用户产生次优体验。

尽可能优化

一旦你已经建立一个基本体验,就开始为其他用户优化体验。你可以使用CSS3,视频,交互,可缩放向量图形(SVG),以及web字体。记住,即使是对HTML和CSS支持的比较好的Email客户端也有它们各自的特殊之处,仍然需要测试哪些才是可行的。

实战:邮件中的渐进增强例子

我们先看看一些在邮件中使用渐进式增强的开创性例子。为了展示对这些邮件的优化,你必须使用一个如Chrome或Safari一样以WebKit为动力的浏览器。

2014邮件设计大会以HTML5视频为背景的邮件

为了播报2014邮件设计大会,我们决定认真地以HTML5视频为背景实现渐进式增强。尽管这种专项技术只能在Apple邮箱和Outlook
2011(Mac版)上工作,但这两种客户端达到接收特定邮件的用户40%左右。

View the full email here

对于不支持视频的电邮客户端,HTML5视频仅仅只是退化为一张静态背景图片。我们的结果却是令人惊奇的——而且回报也是惊人的!

B&Q 交互式旋转圆盘邮件

这一年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包含了一个旋转热点,供用户点击查看不同的部分。

View the full email here

整个邮件中最令人印象深刻的部分,可能是它为非WebKit邮箱使用的备用方案——一个美丽的旋转木马网格布局,没有隐藏也没有复制任何内容!

威尼斯人国际网址 1

你可以在 Firefox 或 Internet Explorer 浏览器中打开该邮件查看备用设计。

Litmus Builder(邮件开发工具)交互之旅邮件

为了引入我们的新邮件代码编辑器,Litmus
Builder,在这封邮件中展示了大量的可点击交互。同样,该技术也只能在Apple邮箱和Outlook
2011(Mac版)中工作,而这两个却占了我们的顾客的绝大部分。(注:邮件需要屏幕至少800像素宽才能浏览。)

该展览仅仅只是退化为一个静态背景图片,而且会调用接口跳转到登录页面。这邮件取得了巨大的成功,其产品在最开始的几天里增加了成千上万的用户。

View the full email here

想尝试一下 Litmus Builder?注册后
,你就可以开始使用HTML5和CSS3测试你的邮件!

一个创新邮件设计框架

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

这个媒介查询为邮件设计师提供了一个简单的创新框架。我们可以为拥有现代邮箱客户端的那一大部分订阅者提供更好的体验。

最好的防卫就是进攻。现在该是进攻的时候了。在邮件设计中使用这个媒介查询开始创新,推动邮件前进。

为了订阅者去尝试。为了我们的行业,为了
对邮件的热爱。

已经迫不及待想看看我们会共同建立出什么了。

如果你用的是这种方法——或者开发你自己的更高级的版本——在你的邮件中,或者如果你对这种方法有任何的疑问,请在下面的评论中贴出,或者用更好的方式,去Litmus社区!

发现你的受众 + 测试你的设计

对于能够开始使用高级技能像HTML5和CSS3来推动邮件发展,是不是感到很激动?确保识别出订阅者们最喜爱的邮箱APP,然后测试你新设计的邮件。

通过邮件分析,你可以了解订阅者经常在哪里打开邮件,这样你就可以集中精力在渐进式增强(以及优雅降级!)上了。

测试设计也是开发过程中非常关键的一步。在30个以上邮箱客户端和APP之间的兼容性测试,可以确保订阅者们不论用什么邮箱打开邮件都能正常获得你的邮件。

 

赞 收藏 1
评论

HTML 邮件内容虽然也是 HTML,但是和我们在网页上使用的 HTML
不同,因为安全原因,各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理,不会按照你写的原本
HTML 展示。

原文地址

行内样式表

介绍

传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力。HTML5的到来,带来了新的成员<canvas>标签。

 

关于作者:fzr

威尼斯人国际网址 2

微博:@fzr-fzr)
个人主页 ·
我的文章 ·
26

威尼斯人国际网址 3

在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式。

今天,我想写一个”低技术”问题。

1 <html>
2     <head>
3           <title>行内样式表</title>
4     </head>
5     <body>
6         <p style="color:blue;font-size:10px;">aaaaaaa</p>
7     </body>
8 </html>    

什么是 Canvas?

HTML5
的 Canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,你可以控制其每一像素。

canvas
拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

尤其是鼎鼎大名的 OutLook,从 OutLook2007 开始便使用 Word HTML
引擎进行渲染,为了它的安全性从而使得整个邮件倒退回了 2000
年前,为了邮件的兼容性你不得不使用很多废弃的标签、属性,并且这一状况将会维持无数个
年头,因为虽然万事终有尽头,但 OutLook 始终存在。

话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript
Weekly。每周收到一封邮件,了解本周的大事。

 

创建 Canvas 元素


HTML5 页面添加 Canvas 元素。

规定元素的
id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

 

因为微软一向地特立独行,使得 OutLook 成为了最难啃的骨头。因为 OutLook
支持的标签和属性少得可怜,所以只要兼容了
OutLook,其他邮箱客户端基本都不会有什么问题。

 

内嵌样式表

通过 JavaScript 来绘制

Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在
JavaScript 内部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
  • 首先,JavaScript
    使用 id 来寻找 Canvas 元素:

    var c=document.getElementById("myCanvas");
    
  • 其次,创建
    context 对象:

    var cxt=c.getContext("2d"); 
    
  • 然后,getContext(“2d”)
    对象是内建的 HTML5
    对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形:

    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75); 
    
  • 最后,使用fillStyle
    方法,可将其染成红色,fillRect 方法规定了形状、位置和尺寸。

 

使用tableb布局

这几乎是 HTML 邮件与普通 HTML 页面最大的区别,因为各个邮箱对 div + css
这一套布局的解析问题很大(如 float / position 等 CSS 都会被过滤,甚至
margin: 0 auto; 都不起作用),基本各大邮箱都会解析混乱,所以老式的 table
布局是上乘之选。这就意味着 HTML 邮件中几乎只有这几个元素——table / tr /
td / span / img / a,尽量避免使用 div / p 或是其他标签。

而且并不是所有邮箱都支持 colspan / rowspan 属性,所以所有布局都需要使用
table 嵌套解决。

有一天,我就在想,是不是我也能做一个这样的邮件?

 1 1 <html>
 2 2     <head>
 3 3           <title>内嵌样式表</title>
 4 4     </head>
 5       <style>
 6             p{
 7                   color:blue;
 8                   font-family:"宋体";
 9                }
10       </style>
11 5     <body>
12 6         <p >aaaaaaa</p>
13 7     </body>
14 8 </html>    

绘图方法:

1.Doctype

目前,兼容性最好的Doctype是XHTML 1.0
Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>HTML Email编写指南</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

 </head>

</html>

使用这个Doctype,也就意味着,不能使用HTML5的语法。

然后,就发现这事不那么容易。抛开后台和编辑工作,单单是设计一个Email样板,就需要不少心思。

 

线条以及填充

-   moveTo()方法使用X和Y作为参数,在
    Canvas 上设置参数指定的线条起始点。
-   lineTo()方法使用X和Y作为参数,在
    Canvas 上创建上一个点到参数指定点的路径。
-   stroke()方法绘制出了
    Canvas 上,moveTo()指定的点到
    lineTo()指定点的路径线条。stroke()方法没有参数。
-   beginPath()方法用于开始一个新路径或重置当前路径,没有参数。
-   closePath()方法用于创建从起始点到终点的路径,有效的闭合并形成路径的形状,没有参数。
-   fill()方法用于为当前的路径填充样式。

JavaScript
代码:

<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.moveTo(250,50);
context.lineTo(150,100);
context.lineTo(250,150);
context.closePath();
context.stroke();
context.fill();
</script>

威尼斯人国际网址 4

 

2.布局

网页的布局(layout)必须使用表格(table)。首先,放置一个最外层的大表格,用来设置背景。

基本html
<body style="margin: 0; padding: 0;">
  <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="border-collapse: collapse; width: 100%; max-width: 750px; margin: 0 auto; text-align:center; font-size:0;">
    <tr>
      <td style="padding: 0;">
        <a href="" target="_blank">
          <img border="0" src="" alt="tuya smart" title="tuya smart" style="width:100%; display: block;"
          />
        </a>
      </td>
    </tr>
    <tr>
      <td style="padding: 0;">
        <img border="0"  src="" alt="tuya smart" title="tuya smart" style="width:100%; display: block;"
        />
      </td>
    </tr>
  </table>
</body>

 

链接外部样式表

文本

HTML5
提供了3个属性 font、textAlign 和 textBaseline,用于定义
Canvas 上文本的不同状态。

    • font
      属性设置或获取字体属性,如字体样式、字重、字体大小和字体系列等。它遵循和
      CSS 字体属性相同的语法。
    • textAlign
      属性设置或获取文本内容的水平对齐方式。textAlign
      可以设置成5个值:”start”,  “end”,  “right”,  “left” 和
      “center”
    • textBaseline
      属性设置或获取文本内容的垂直对齐方式。textBaseline
      可以设置成5个值:”top”,  “bottom”,  “middle”,  “aplhabetic” 和
      “hanging”。

 

3.图片

图片是唯一可以引用的外部资源。其他的外部资源,比如样式表文件、字体文件、视频文件等,一概不能引用。

有些客户端会给图片链接加上边框,要去除边框。

img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
}

a img {
    border:none;
}

<img border="0" style="display:block;">

需要注意的是,不少客户端默认不显示图片(比如Gmail),所以要确保即使没有图片,主要内容也能被阅读。

因为这种带格式的邮件,其实就是一张网页,正式名称叫做HTML
Email。它能否正常显示,完全取决于邮件客户端。大多数的邮件客户端(比如Outlook和Gmail),会过滤HTML设置,让邮件面目全非。

one.css代码

渐变

-   strokeStyle
    属性设置或获取 Canvas 上用于绘制路径的颜色、渐变和图案。
-   createLinearGradient()方法通过将对象以值的形式分配给
    strokeStyle
    或者相关图形的填充属性,用于创建填充举行,圆形,线条和文本的渐变对象。

createLinearGradient有4个参数:

      • 起点的X坐标
      • 起点的Y坐标
      • 终点的X坐标
      • 终点的Y坐标
    • createLinearGradient()方法必须与
      addColorStop()方法一起使用,来指定渐变对象中的不同颜色和相对的位置。

    • addColorStop()方法指定了渐变对象的颜色和位置。

addColorStop()有2个参数:

      • 一个0.0到1.0之间的值,代表渐变中开始点和结束点的位置。
      • 该点位置的颜色

JavaScript
代码:

<script type="text/javascript">
var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');
var gradient=context.createLinearGradient(50,30,50,170);
gradient.addColorStop(0,"red");
gradient.addColorStop("0.1","orange");
gradient.addColorStop("0.3","yellow");
gradient.addColorStop("0.5","green");
gradient.addColorStop("0.7","blue");
gradient.addColorStop("0.9","indigo");
gradient.addColorStop(1,"violet");
context.fillStyle=gradient;
context.fillRect(50,30,250,140);
</script>

威尼斯人国际网址 5

4.行内样式

所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里。

另外,不要采用CSS的简写形式,有些客户端不支持。比如,不要写成下面这样:

style="font: 8px/14px Arial, sans-serif;"

如果想表达

<p style="margin: 1em 0;">

要写成下面这样:

<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">

我发现,编写HTML
Email的窍门,就是使用15年前的网页制作方法。下面就是我整理的编写指南。

body{
      color:blue;
      font-size:10px;  
}

图片

-   DrawImage()方法用于绘制输入的图像,视频等到
    Canvas 上。

DrawImage()方法有4个参数:

      • 放置图像的X坐标
      • 放置图像的Y坐标
      • 图像的宽度
      • 图像的高度
    • getImageData()方法通过从
      Canvas 上指定的矩形里拷贝像素数据,来创建一个图形数据对象。

getImageData()方法有4个参数:

      • 复制的矩形左上角X坐标
      • 复制的矩形左上角Y坐标
      • 复制矩形的宽度
      • 复制矩形的高度
    • putImageData()方法用于将指定图像的像素数据放回到
      Canvas 上来。

putImageData()方法有7个参数:

      • ImageData
        对象
      • ImageData
        对象左上角的x坐标
      • ImageData
        对象左上角的Y坐标
      • 放置图像的X坐标
      • 放置图像的Y坐标
      • 绘制图像的宽度
      • 绘制图像的高度

本系列
HTML5 / CSS3 的知识介绍已经全部结束了,希望对学习 HTML5 / CSS3
的朋友有所帮助。

 

相关阅读:

开放才能进步!Angular和Wijmo一起走过的日子

Angular vs React
最全面深入对比

Wijmo已率先支持Angular4 &
TypeScript
2.2

 

相关文章

HTML
邮件兼容问题与解决方案

1. Doctype

目前,兼容性最好的Doctype是XHTML 1.0
Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;

<html xmlns=”;

 <head>

  <meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″ />

  <title>HTML Email编写指南</title>

  <meta name=”viewport” content=”width=device-width,
initial-scale=1.0″/>

 </head>

</html>

使用这个Doctype,也就意味着,不能使用HTML5的语法。

 html代码

2. 布局

网页的布局(layout)必须使用表格(table)。首先,放置一个最外层的大表格,用来设置背景。

<body style=”margin: 0; padding: 0;”>

 <table border=”1″ cellpadding=”0″ cellspacing=”0″
width=”100%”>

  <tr> 
   <td> Hello! </td>
  </tr>

 </table>

</body>

表格的 border 属性等于1,
是为了方便开发。正式发布的时候,再把这个属性设为0。

在内层,放置第二个表格。用来展示内容。第二个table的宽度定为600像素,防止超过客户端的显示宽度。

<table align=”center” border=”1″ cellpadding=”0″ cellspacing=”0″
width=”600″ style=”border-collapse: collapse;”>

 <tr>
  <td> Row 1 </td>
 </tr>

 <tr>
  <td> Row 2 </td>
 </tr>

 <tr>
  <td> Row 3 </td>
 </tr>

</table>

邮件内容有几个部分,就设置几行(row)。

<head>
    <link rel="stylesheet" href="one.css"  type="text/css">
</head>

3. 图片

图片是唯一可以引用的外部资源。其他的外部资源,比如样式表文件、字体文件、视频文件等,一概不能引用。

有些客户端会给图片链接加上边框,要去除边框。

  img {outline:none; text-decoration:none; -ms-interpolation-mode:
bicubic;}

  a img {border:none;}

  <img border=”0″ style=”display:block;”>

需要注意的是,不少客户端默认不显示图片(比如Gmail),所以要确保即使没有图片,主要内容也能被阅读。

 

4. 行内样式

所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里。

另外,不要采用CSS的简写形式,有些客户端不支持。比如,不要写成下面这样:

  style=”font: 8px/14px Arial, sans-serif;”

如果想表达

  <p style=”margin: 1em 0;”>

要写成下面这样:

  <p style=”margin-top: 1em; margin-bottom: 1em; margin-left: 0;
margin-right: 0;”>

导入外部样式表

5. W3C校验和测试工具

要保证最终的代码,能够通过W3C的校验,因为某些客户端会把不合格属性剥离。还要使用测试工具(1, 2,3),查看在不同客户端的显示结果。

发送HTML Email的时候,不要忘记MIME类型不能使用

  Content-Type: text/plain;

而要使用

  Content-Type: Multipart/Alternative;

发送工具可以考虑使用 MailChimp 和 Campaign
Monitor 。

one.css代码

6. 模板

使用别人已经做好的模板,是一个不错的选择(这里和这里),网上还可以搜到更多。

自己开发的话,可以参考HTML Email
Boilerplate和Emailology。

body{
      color:blue;
      font-size:10px;  
}

7. 参考链接

进一步研究,请参考下面的文章。

  - Sean Powell,Say Hello to the HTML Email
Boilerplate
  - Nicole Merlin,Build an HTML Email Template From
Scratch
  - Nicole Merlin, What You Should Know About HTML
Email

(完)

 html代码

<head>
   <style type="text/css">
   @import "one.css"
   </style>
</head>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注