Fatal编程技术网
  • responsive-design/
  • Responsive design 响应电子邮件模板-Outlook 2013断开布局

Responsive design 响应电子邮件模板-Outlook 2013断开布局

responsive-design

Responsive design 响应电子邮件模板-Outlook 2013断开布局,responsive-design,html-email,fluid-layout,hybrid,Responsive Design,Html Email,Fluid Layout,Hybrid,此布局仅在Outlook中中断。我不记得我从哪里得到的模板，所以我不能给它应得的荣誉，但我相信这是李·门罗的模板之一。我不明白为什么它会在Outlook 2013中出现突破，它是一个简单的单列布局。我有一个更复杂的单列布局，我正在使用同一个框架，这一个给我没有任何麻烦。但当我试图将其解析为一个更简单的布局时，我无法让它与Outlook很好地配合使用。有什么想法吗？自学成才的程序员，所以我可能会错过一些简单的东西。我知道Outlook无法处理最大宽度，但此模板应该是Outlook就绪的 <!

此布局仅在Outlook中中断。我不记得我从哪里得到的模板，所以我不能给它应得的荣誉，但我相信这是李·门罗的模板之一。我不明白为什么它会在Outlook 2013中出现突破，它是一个简单的单列布局。我有一个更复杂的单列布局，我正在使用同一个框架，这一个给我没有任何麻烦。但当我试图将其解析为一个更简单的布局时，我无法让它与Outlook很好地配合使用。有什么想法吗？自学成才的程序员，所以我可能会错过一些简单的东西。我知道Outlook无法处理最大宽度，但此模板应该是Outlook就绪的

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>A Message from the CEO</title>
  <style type="text/css">

img {
  border: none;
  -ms-interpolation-mode: bicubic;
  max-width: 100%; }

.img-block {
  display: block; }

body {
  font-family: open sans, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

table {
  border-collapse: separate;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  width: 100%; }
  table td {
    font-family: open sans, sans-serif;
    font-size: 14px;
    vertical-align: top; }

body {
  background-color: #F6F6F6;
  Margin: 0;
  padding: 0; }

.body {
  background-color: #F6F6F6;
  width: 100%; }

.container {
  Margin: 0 auto !important;
  max-width: 600px;
  padding: 30px;
  width: auto !important;
  width: 600px; }

.content {
  box-sizing: border-box;
  display: block;
  Margin: 0 auto;
  max-width: 600px;
  padding: 0px; }

.main {
  background: #FFFFFF;
  border-radius: 3px;
  width: 100%; }

.wrapper {
  box-sizing: border-box;
  padding: 30px; }

.header {
  background-color: #FFFFFF;
  Margin-bottom: 0px;
  Margin-top: 0px;
  padding: 0px 0px 0px 0px;
  width: 100%; }
  .header > table {
    min-width: 100%; }

h1,
h2,
h3,
h4 {
  Margin: 0; }

h1 {
  font-family: open sans, sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  color: #7D1745;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 10px; }

h2 {
  font-family: open sans, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  color: #3C708F;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

h3 {
  font-family: open sans, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  color: #7D1745;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

h4 {
  font-family: open sans, sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #454646;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

ul,
ol {
  font-family: open sans, sans-serif;
  font-size: 1em;
  font-weight: normal;
  color: #454646;
  Margin: 0;
  Margin-bottom: 20px; }
  p li,
  ul li,
  ol li {
    list-style-position: outside;
    Margin-left: 15px;
    padding: 0;
    text-indent: 0; }
ul,
ol {
  Margin-left: 5px;
  padding: 0;
  text-indent: 0; }

a:link {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:hover {
  font-family: open sans, sans-serif;
  color: #56A2CC;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:active {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:visited {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

.preheader {
  color: transparent;
  display: none;
  height: 0;
  max-height: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  mso-hide: all;
  visibility: hidden;
  width: 0; }

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 24px !important;
    Margin-bottom: 10px !important; }
  h2 {
    font-size: 21px !important;
    Margin-bottom: 10px !important; }
  h3 {
    font-size: 21px !important;
    Margin-bottom: 10px !important; }
  h4 {
    font-size: 18px !important;
    Margin-bottom: 10px !important; }
  p,
  ul,
  ol,
  td,
  span,
  a {
    font-size: 16px !important; }
  .wrapper {
    padding: 10px !important; }
  .content {
    padding: 0 !important; }
  .container {
    padding: 0 !important;
    width: 100% !important; }
  .header {
    Margin-bottom: 10px !important; }
  .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important; }
  .img-responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important; } }

@media all {
  .ExternalClass {
    width: 100%; }
  .ExternalClass,
  .ExternalClass p,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div {
    line-height: 100%; }
  .apple-link a {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important; } }
    </style>

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

</head>
<body class="">
  <table border="0" cellpadding="0" cellspacing="0" class="body">
    <tr>
      <td class="container">
        <div class="content">
        <!-- START CENTERED WHITE CONTAINER -->
        <span class="preheader">Read the latest update from Johnson Financial Group.</span>
        <table class="main" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp_600px.jpg" title="A Message from the CEO" alt="Header Image" width="600" class="img-responsive" border="0"></td>
          </tr>
          <tr>
            <td class="wrapper">
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td>
                    <h1>Headline</h1>
                    <p>Content here. Blah blah blah blah.</p>
                    <h2>Subheadline 1</h2>
                    <p>Content here. Blah blah blah blah.</p>
                    <h3>Subheadline 2</h3>
                    <p>Content here. Blah blah blah blah. <a href="https://www.johnsonbank.com/" title="Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank"><strong style="font-weight: 700;">Read More</strong></a></p>
                    <h4>Subheadline 3</h4>
                    <p>Content here. Blah blah blah blah.</p>
                    <p><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp.png" title="Jim Popp, CEO Johnson Financial Group" alt="Jim Popp" width="100" class="img-responsive" border="0" /></p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="wrapper">
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center">
                    <img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/JFG-HRZ-Web-200px.png" title="Johnson Financial Group" alt="JFG Logo" width="200" class="img-responsive" border="0" /><br />
                    <div>&nbsp;</div>
                    <a href="https://www.johnsonbank.com/Personal/Banking" title="Personal Banking | Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">BANKING</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.johnsonbank.com/Personal/Wealth" title="Personal Wealth | Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">WEALTH</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.johnsonbank.com/Personal/Insurance" title="Personal Insurance | Johnson Insurance" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">INSURANCE</strong></a><br />
                    <div>&nbsp;</div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- END CENTERED WHITE CONTAINER -->
        </div>
      </td>
    </tr>
  </table>
</body>
</html>


首席执行官的口信
img{
边界：无；
-ms插值方式：双三次插值；
最大宽度：100%；}
.img块{
显示：block；}
身体{
字体系列：开放式sans，无衬线；
-webkit字体平滑：抗锯齿；
字体大小：14px；
线高：1.4；
-ms文本大小调整：100%；
-webkit文本大小调整：100%；}
桌子{
边界塌陷：分离；
mso表空间：0pt；
mso表rspace:0pt；
宽度：100%；}
表td{
字体系列：开放式sans，无衬线；
字体大小：14px；
垂直对齐：顶部；}
身体{
背景色：#F6F6F6；
保证金：0；
填充：0；}
.身体{
背景色：#F6F6F6；
宽度：100%；}
.集装箱{
保证金：0自动！重要；
最大宽度：600px；
填充：30px；
宽度：自动！重要；
宽度：600px；}
.内容{
框大小：边框框；
显示：块；
保证金：0自动；
最大宽度：600px；
填充：0px；}
梅因先生{
背景：#FFFFFF；
边界半径：3px；
宽度：100%；}
.包装纸{
框大小：边框框；
填充：30px；}
.标题{
背景色：#FFFFFF；
边缘底部：0px；
边际上限：0px；
填充：0px 0px 0px 0px；
宽度：100%；}
.标题>表格{
最小宽度：100%；}
h1，
h2，
h3，
h4{
边距：0；}
h1{
字体系列：开放式sans，无衬线；
字号：1.4em；
字号：700；
颜色：#7D1745；
文本对齐：左对齐；
线高：1.4；
页边距底部：10px；}
氢{
字体系列：开放式sans，无衬线；
字体大小：1.2米；
字号：700；
颜色：#3C708F；
文本对齐：左对齐；
线高：1.4；
页边距底部：15px；}
h3{
字体系列：开放式sans，无衬线；
字体大小：1.2米；
字号：700；
颜色：#7D1745；
文本对齐：左对齐；
线高：1.4；
页边距底部：15px；}
h4{
字体系列：开放式sans，无衬线；
字号：1em；
字号：700；
颜色：#454646；
文本对齐：左对齐；
线高：1.4；
页边距底部：15px；}
ul，
ol{
字体系列：开放式sans，无衬线；
字号：1em；
字体大小：正常；
颜色：#454646；
保证金：0；
页边距底部：20px；}
李鹏，
李国宝，
欧利{
列表样式位置：外部；
左边距：15px；
填充：0；
文本缩进：0；}
ul，
ol{
左边距：5px；
填充：0；
文本缩进：0；}
a:链接{
字体系列：开放式sans，无衬线；
颜色：#3C708F；
字号：1em；
字号：700；
文本装饰：无；}
a:悬停{
字体系列：开放式sans，无衬线；
颜色：#56A2CC；
字号：1em；
字号：700；
文本装饰：无；}
a:主动的{
字体系列：开放式sans，无衬线；
颜色：#3C708F；
字号：1em；
字号：700；
文本装饰：无；}
a:参观了{
字体系列：开放式sans，无衬线；
颜色：#3C708F；
字号：1em；
字号：700；
文本装饰：无；}
.预热头{
颜色：透明；
显示：无；
身高：0；
最大高度：0；
最大宽度：0；
不透明度：0；
溢出：隐藏；
mso隐藏：全部；
可见性：隐藏；
宽度：0；}
@仅介质屏幕和（最大宽度：600px）{
h1{
字体大小：24px！重要；
页边距底部：10px！重要；}
氢{
字体大小：21px！重要；
页边距底部：10px！重要；}
h3{
字体大小：21px！重要；
页边距底部：10px！重要；}
h4{
字体大小：18px！重要；
页边距底部：10px！重要；}
P
ul，
ol,，
运输署，
跨度
a{
字体大小：16px！重要；}
.包装纸{
填充：10px！重要；}
.内容{
填充：0！重要；}
.集装箱{
填充：0！重要；
宽度：100%！重要；}
.标题{
页边距底部：10px！重要；}
梅因先生{
边框左宽度：0！重要；
边界半径：0！重要；
右边框宽度：0！重要；}
.img响应{
高度：自动！重要；
最大宽度：100%！重要；
宽度：自动！重要；}}
@媒体所有{
.外部类{
宽度：100%；}
.外部类，
.外部类别p，
.ExternalClass span，
.ExternalClass字体，
.ExternalClass td，
.ExternalClass分区{
线条高度：100%；}
.苹果链接a{
颜色：继承！重要；
字体家族：继承！重要；
字体大小：继承！重要；
字体大小：继承！重要；
行高：继承！重要；
文本装饰：无！重要；}
阅读约翰逊金融集团的最新更新。
大字标题
内容在这里。废话废话

分目1
内容在这里。废话废话

分目2
内容在这里。废话废话

分目3
内容在这里。废话废话
Y 
table {
  border-collapse: separate;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  /*width: 100%; <-- don't use this */
  width: 600px;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

font-family: 'Open Sans', Arial, sans-serif;