【HTML】foundation响应式框架邮箱html编写的使用

前言

入职的第一个任务，当时没看懂任务中的这个框架，自己写了一套html，结果不符合响应式的要求，在看了一遍官方官网站后才看懂这个框架，确实是对于编写邮箱html的帮助特别大。
在编写代码之前，我们必须先了解html邮箱的编写规则和要求，可以参考这几篇博客的内容，对于了解html邮箱的介绍很有帮助。
HTML Email 编写指南
创建响应式HTML电子邮件

开始

Foundation官网进入官网下拉找到这个页面，然后按顺序进入，可以选择css版本的教学
image
image
image
image
下拉可以看到教学
image
基本上按照教学可以进行简单的入门，如果教学看懂了就可以下载官方的例子来进行学习，具体demo在这里。
image
进入demo，通过鼠标右键查看源代码，将代码copy到本地就可以按照教学中的一些教程进行学习和模仿。

编写

基本上就是这个格式代码，其中一些样式需要导入框架才能生效，具体就是link中的哪一行，其余的一些class样式的含义就需要自己去查看和学习，不过都很简单，很好理解，根据文档、demo例子和自己的项目需求来就行。

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <!-- The character set should be utf-8 -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <!-- Link to the email's CSS, which will be inlined into the email -->
  <link rel="stylesheet" href="assets/css/foundation-emails.css">
  <style>
    <!-- Your CSS to inline should be added here -->
  </style>
</head>

<body>
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>
          <!-- The content of your email goes here. -->
        </center>
      </td>
    </tr>
  </table>
</body>
</html>
posted @ 2021-07-07 11:02  努力挣钱的小鑫  阅读(193)  评论(0)  编辑  收藏  举报