Html 电子邮件模板Outlook
Outlook的电子邮件模板有问题。 我的问题是，我使用了一个背景图像vml黑客，并希望它的中心文本。 背景图像工作，但我不能发送电子邮件，如果我中心文本与另一个表 outlook on p和div标记中不支持填充和边距： 有什么想法吗 代码如下Html 电子邮件模板Outlook,html,css,email,outlook,email-templates,Html,Css,Email,Outlook,Email Templates,Outlook的电子邮件模板有问题。 我的问题是，我使用了一个背景图像vml黑客，并希望它的中心文本。 背景图像工作，但我不能发送电子邮件，如果我中心文本与另一个表 outlook on p和div标记中不支持填充和边距： 有什么想法吗 代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|MC:SUBJECT|*" />
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
/* Template Styles */
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Page
* @section background color
* @tip Set the background color for your email. You may want to choose one that matches your company's branding.
* @theme page
*/
body, #backgroundTable{
/*@editable*/ background-color:#8DCDDA;
}
/**
* @tab Page
* @section email border
* @tip Set the border for your email.
*/
#templateContainer{
/*@editable*/ border: 0px solid #DDDDDD;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1, .h1{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2, .h2{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:30px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3, .h3{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:26px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4, .h4{
/*@editable*/ color:#202020;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:22px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Header
* @section preheader style
* @tip Set the background color for your email's preheader area.
* @theme page
*/
#templatePreheader{
/*@editable*/ background-color:#8DCDDA;
}
/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent div{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:left;
}
/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#336699;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Header
* @section header style
* @tip Set the background color and border for your email's header area.
* @theme header
*/
#templateHeader{
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border-bottom:0;
}
/**
* @tab Header
* @section header text
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent{
/*@editable*/ color:#202020;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ padding:0;
/*@editable*/ text-align:center;
/*@editable*/ vertical-align:middle;
}
/**
* @tab Header
* @section header link
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#336699;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px !important;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Body
* @section body style
* @tip Set the background color for your email's body area.
*/
#templateContainer, .bodyContent{
/*@editable*/ background-color:#FFFFFF;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent div{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:150%;
/*@editable*/ text-align:left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#336699;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and top border for your email's footer area.
* @theme footer
*/
#templateFooter{
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border-top:0;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent div{
/*@editable*/ color:#707070;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:12px;
/*@editable*/ line-height:125%;
/*@editable*/ text-align:left;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#336699;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
.footerContent img{
display:inline;
}
/**
* @tab Footer
* @section social bar style
* @tip Set the background color and border for your email's footer social bar.
* @theme footer
*/
#social{
/*@editable*/ background-color:#FAFAFA;
/*@editable*/ border:0;
}
/**
* @tab Footer
* @section social bar style
* @tip Set the background color and border for your email's footer social bar.
*/
#social div{
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section utility bar style
* @tip Set the background color and border for your email's footer utility bar.
* @theme footer
*/
#utility{
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border:0;
}
/**
* @tab Footer
* @section utility bar style
* @tip Set the background color and border for your email's footer utility bar.
*/
#utility div{
/*@editable*/ text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="900" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_preheader_content">
</div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190">
<div mc:edit="std_preheader_links">
Wird die Email korrekt angezeigt?<br /><a href="http://xmas.apm-service.de/apm/email.html" target="_blank">Im Internet annzeigen</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="900" id="templateContainer">
<tr>
<td valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="900" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="http://xmas.apm-service.de/apm/headerneu.png" style="max-width:900px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="900" id="templateBody">
<tr>
<td valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="745">
<tr align="center">
<td valign="top" bgcolor="#8DCDDA" background="http://xmas.apm-service.de/apm/bgneu.png">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:745px; width:900px; top:0; left:0; border:0; z-index:1;' src="http://xmas.apm-service.de/apm/bgneu.png"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:745px; width:900px; top:-5; left:-10; border:0; z-index:2;'>
<![endif]-->
<p style="text-align:justify;font-family:Arial;font-size:15px;width:70%;"><br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</center>
</body>
</html>
*|主持人：主题|*
/*特定于客户端的样式*/
#outlook a{padding:0；}/*强制outlook提供“浏览器中的视图”按钮*/
正文{宽度：100%！重要；}.ReadMsgBody{宽度：100%；}.ExternalClass{宽度：100%；}/*强制Hotmail以全宽显示电子邮件*/
正文{-webkit text size adjust:none；}/*阻止webkit平台更改默认文本大小*/
/*重置样式*/
正文{margin:0；padding:0；}
img{边框：0；高度：自动；线条高度：100%；轮廓：无；文本装饰：无；}
表td{边框折叠：折叠；}
#背景表{高度：100%！重要；边距：0；填充：0；宽度：100%！重要；}
/*模板样式*/
/*/\/\/\/\/\/\/\/\/\/\/\标准样式：通用页面元素/\/\/\/\/\/\/\/\/\/\/\/\\*/
/**
*@制表页
*@section背景色
*@tip设置电子邮件的背景色。您可能希望选择一个与您公司的品牌相匹配的品牌。
*@主题页
*/
正文#背景表{
/*@可编辑*/背景色：#8DCDDA；
}
/**
*@制表页
*@section电子邮件边框
*@tip为您的电子邮件设置边框。
*/
#模板容器{
/*@可编辑*/边框：0px实心#dddd；
}
/**
*@制表页
*@第1节标题
*@tip设置电子邮件中所有一级标题的样式。这些应该是你最大的标题。
*@样式标题1
*/
h1，.h1{
/*@可编辑*/颜色：#202020；
显示：块；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：34px；
/*@可编辑*/字体大小：粗体；
/*@可编辑*/行高：100%；
边际上限：0；
右边距：0；
边缘底部：10px；
左边距：0；
/*@可编辑*/文本对齐：左；
}
/**
*@制表页
*@第2节标题
*@tip设置电子邮件中所有二级标题的样式。
*@样式标题2
*/
h2，.h2{
/*@可编辑*/颜色：#202020；
显示：块；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：30px；
/*@可编辑*/字体大小：粗体；
/*@可编辑*/行高：100%；
边际上限：0；
右边距：0；
边缘底部：10px；
左边距：0；
/*@可编辑*/文本对齐：左；
}
/**
*@制表页
*@第3节标题
*@tip设置电子邮件中所有三级标题的样式。
*@样式标题3
*/
h3，.h3{
/*@可编辑*/颜色：#202020；
显示：块；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：26px；
/*@可编辑*/字体大小：粗体；
/*@可编辑*/行高：100%；
边际上限：0；
右边距：0；
边缘底部：10px；
左边距：0；
/*@可编辑*/文本对齐：左；
}
/**
*@制表页
*@第节标题4
*@tip设置电子邮件中所有四级标题的样式。这些标题应该是最小的标题。
*@style标题4
*/
h4，.h4{
/*@可编辑*/颜色：#202020；
显示：块；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：22px；
/*@可编辑*/字体大小：粗体；
/*@可编辑*/行高：100%；
边际上限：0；
右边距：0；
边缘底部：10px；
<td width="600" align="center">
This is centered.
</td>