在outlook签名中包含自己的html和css_Html_Css_Outlook

在outlook签名中包含自己的html和css

html css outlook

在outlook签名中包含自己的html和css,html,css,outlook,Html,Css,Outlook,编辑我已经实现了html作为签名，但是我现在遇到的问题非常奇怪我有一个签名，每次我从outlook发送到web邮件服务outlook时，都会在html中添加标记，并弄乱所有的间距。我怎样才能解决这个问题我有一个关于Outlook签名的问题。对于我的工作，我必须做一个签名，这样看起来更专业。我已经做了一个测试，看看我需要如何将它实现到签名的HTML中，但是我不能完全理解它这是Outlook生成的代码： <style> <!-- /* Font Definitio

编辑我已经实现了html作为签名，但是我现在遇到的问题非常奇怪

我有一个签名，每次我从outlook发送到web邮件服务outlook时，都会在html中添加标记，并弄乱所有的间距。我怎样才能解决这个问题

我有一个关于Outlook签名的问题。对于我的工作，我必须做一个签名，这样看起来更专业。我已经做了一个测试，看看我需要如何将它实现到签名的HTML中，但是我不能完全理解它

这是Outlook生成的代码：

    <style>
<!--
 /* Font Definitions */
 @font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;
    mso-font-charset:0;
    mso-generic-font-family:swiss;
    mso-font-pitch:variable;
    mso-font-signature:-520092929 1073786111 9 0 415 0;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {mso-style-unhide:no;
    mso-style-qformat:yes;
    mso-style-parent:"";
    margin:0cm;
    margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:"Times New Roman";
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;}
p.MsoAutoSig, li.MsoAutoSig, div.MsoAutoSig
    {mso-style-priority:99;
    mso-style-link:"E-mailhandtekening Char";
    margin:0cm;
    margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:"Times New Roman";
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;}
span.E-mailhandtekeningChar
    {mso-style-name:"E-mailhandtekening Char";
    mso-style-priority:99;
    mso-style-unhide:no;
    mso-style-locked:yes;
    mso-style-link:E-mailhandtekening;}
.MsoChpDefault
    {mso-style-type:export-only;
    mso-default-props:yes;
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:"Times New Roman";
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;}
@page WordSection1
    {size:595.3pt 841.9pt;
    margin:70.85pt 70.85pt 70.85pt 70.85pt;
    mso-header-margin:35.4pt;
    mso-footer-margin:35.4pt;
    mso-paper-source:0;}
div.WordSection1
    {page:WordSection1;}
-->
</style>


</head>

<body lang=NL style='tab-interval:35.4pt'>

<div class=WordSection1>

<p class=MsoAutoSig><span style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:
minor-latin'><o:p>&nbsp;</o:p></span></p>

</div>

</body>

</html>

我真的不明白我需要把代码放在哪里。这是我的代码：

<style>
a {
    text-decoration: none;
    color: inherit;
}

.wrapper {
    width:50%;
    font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}

.topText {
    font-size: 11pt;
    margin-bottom: 5px;
}

.topLine {
   border-top: 2px solid  #C80032;
   margin-bottom: 5px;
}

.content {
    height:100px;
    width: 100%;
    margin-bottom: 5px;
}

p {
    font-size:10pt;
}

.left-content {
    float:left;
    margin-right: 140px;
}

.right-content {
}

.name {
    margin: 0px !important;
    float: left;
}

.address {
    margin: 0px 0px 0px 20px;
}

.address_A {
    margin: 0px 0px 0px 30px;
}

.address_M {
    margin: 0px 0px 0px 14px;
}

.bottomBar {
    float: right;
    width:74.5%;
    height: 25px;
    background-color:#7F7B7B;
    color: white;
    font-size: 12pt;
    text-align: left;
    margin-left: 18px;
}

.tableStyle{
    margin-bottom: 5px;
}

.social-Blocks
{
    background-color:white;
    width: 25px !important;
    height: 25px !important;
    float:left;
    margin-left: 15px;
    text-align:center;
    font-size: 23px;
    color: #0987B2;
}

.bottom-bar-first{
    float: left;
    width:11%;
    height: 25px;
    background-color:#7F7B7B;
    color: white;
    font-size: 12pt;
}

.bottom_Span{
 margin-left: 10px;
}

.suplaconLogo{
    height:90px ;
    width:190px;
}

.logo{
    float: right;
}


</style>
<link rel="stylesheet" href="style.css"></head>

<div class="wrapper">
 <div class="topText">Met vriendelijke groet,</div>
    <div class="topLine"></div>
    <img class="logo" src="images/logo.png" height="80" width="350">
    <table class="tableStyle" cellpadding="0">
        <tr>
            <td><span><strong>Information</strong></span></td><td><span class="address_A"><strong>Information</strong></span></td>
        </tr>
        <tr>
            <td><span class="name">T</span><span class="address"> Information</span></td>
            <td><span class="address_A">Information</span></td>
        </tr>

        <tr>
            <td><span class="name">M</span><span class="address_M">Information</span></td>
            <td><span class="address_A">Information</span></td>
        </tr>

        <tr>
            <td><span class="name">E</span><span class="address">Information </span></td>
            <td><span class="address_A"><a href="">Information</a></span></td>
        </tr>
    </table>


    <div class="bottomStyle">
        <div class="bottom-bar-first"></div>
        <div class="social-Blocks"><a href="
"><span class="icon-linkedin center" target="blank"></span></a></div>
        <div class="social-Blocks"><a href="" target="blank"><span class="icon-facebook2 center"></span></a></div>
        <div class="social-Blocks"><a href="" target="blank"><img src="" height="25"></a></div>
        <div class="bottomBar"><span class="bottom_Span"><strong> Information</strong></span></div>
    </div>
</div>


a{
文字装饰：无；
颜色：继承；
}
.包装纸{
宽度：50%；
字体系列：Calibri、Candara、Segoe、“Segoe UI”、Optima、Arial、无衬线字体；
}
.topText{
字号：11pt；
边缘底部：5px；
}
.背线{
边框顶部：2个实心#C80032；
边缘底部：5px；
}
.内容{
高度：100px；
宽度：100%；
边缘底部：5px；
}
p{
字号：10pt；
}
.左内容{
浮动：左；
右边距：140px；
}
.正确的内容{
}
.姓名{
保证金：0px！重要；
浮动：左；
}
.地址{
保证金：0px 0px 0px 20px；
}
.地址{
保证金：0px 0px 0px 30px；
}
.地址{
保证金：0px 0px 0px 14px；
}
.底线{
浮动：对；
宽度：74.5%；
高度：25px；
背景色：#7F7B；
颜色：白色；
字号：12号；
文本对齐：左对齐；
左边距：18px；
}
.表格样式{
边缘底部：5px；
}
.社会障碍
{
背景色：白色；
宽度：25px！重要；
高度：25px！重要；
浮动：左；
左边距：15px；
文本对齐：居中；
字体大小：23px；
颜色：#0987B2；
}
.首先是底线{
浮动：左；
宽度：11%；
高度：25px；
背景色：#7F7B；
颜色：白色；
字号：12号；
}
1.底跨{
左边距：10px；
}
苏普拉孔洛戈{
高度：90px；
宽度：190px；
}
.标志{
浮动：对；
}
遇见了弗里恩德里克·格罗特，
信息信息
T信息
问询处
碎裂
问询处
电子信息
信息

如何在Outlook的代码中包含我的代码，或者我需要将代码放在哪里？我发现了这一点，而且我的CSS似乎确实兼容：

几乎所有电子邮件客户端都不支持链接到外部样式表（当然Outlook不支持）

因此，我建议您将所有内容放在

head>style

标记中

我的Outlook签名最佳做法（即使听起来很恶心）是在MS Word中设置签名样式，并将此文本块粘贴到选项中的Outlook签名框中

我会避免在Outlook中使用自己的自定义css。

好吧，Outlook糟透了。它只是不支持很多CSS。无论是桌面客户端还是webmail版本，甚至是hotmail或msn mail，您都会得到不同的结果

此链接提供了一些关于支持/不支持的内容的见解。例如，您不能在Outlook中浮动

您还应该使用内联样式，而不是外部链接，甚至在头部包含样式块，这样它们就不会被剥离。这里有一个工具可以自动做到这一点

基本上，由于缺乏CSS支持，您需要为Microsoft简化它

将所有样式内联，这将解决大多数问题，例如：

将代码包含在HTML文件中

在浏览器中打开所述HTML文件

突出显示输出的签名并将其复制到剪贴板

谷歌如何在你的操作系统上为你的Outlook版本添加签名（例如）

粘贴到签名字段中

完成了。你应该有一个值得称赞的跨客户签名

顺便说一句，如果你能帮忙的话，我建议不要从Word复制和粘贴。

在你的源代码中缺少开头

head

，否则重新发布完整的源代码示例邮件你试过我的方法吗？使用Word中的表格，您可以根据需要创建签名。然后将其复制到Outlook，让Outlook发挥作用。至少我会试试这个。是的，它对填充物和其他东西也有同样的效果，outlook会在你保存签名时进行广告。添加的样式在问题中只是为了确定：你的Word签名中没有使用任何css？而且它看起来不像你在Outlook中期望的那样？