Question

为我爸爸的公司创建一个HTML页脚我遇到了很大的问题。他们正在使用OE和Outlook 10.我已经研究了很长时间的代码，但我仍然遇到了一些问题。我可以使用外部字体吗？我应该如何使它工作？如何用宽度定位它：X％？

我希望它看起来像这样：

enter image description here

但它没有......

以下是代码：

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>www.k#$#$#$#$#$#$#$.com</title>
<style>

@font-face {
    font-family: times_Sans_Serif;
    src: url('http://a#$#$#$#$#$#$#$.pl/tem/TIMESS_.ttf');
}

p, a, span {
    font-family: times_Sans_Serif;
}

a {
    text-decoration:none;
}


.header {
    width:100%;
    height:5px;
    display:block;
    background-color:#6d5759;
}

.section li{
    float: left;
    display: inline;
    list-style-type: none;
    margin:0% 3%;
    padding:0;
    position:relative;
}

.section p{
    display:block;
    text-align: left;
    color:#6d5759;
}



.section a{
    color: #6d5759;
}

#logo {
    text-decoration:none;
    text-align: right;

}

.footer {
    clear:both;
    font-size:11px;
    width:100%;
    height:auto;
    display:block;
    background-color:#6d5759;
    color:#FFF;
    text-align:center;
    padding: 5px;
}

.footer a{
    color:#FFF;
}

</style>
</head>

<body>
<div class="main">
    <div class="header"></div>

    <ul class="section">

        <li id="osoba">
               <p>
<a href="http://k#$#$#$#$#$#$#$.com/o-nas" target="_blank">Marcjusz K#$#$#$#$#$#$#$</a><br>
                +48 500 000 000<br>
                marcjusz@k#$#$#$#$#$#$#$.com
                </p>
        </li>

        <li id="logo">
            <a href="http://k#$#$#$#$#$#$#$.com/" target="_blank"><img src="http://#$#$#$#$#$#$#$.pl/tem/image001.png"></a>
        </li>


    </ul>

    <div class="footer">
        <span> K#$#$#$#$#$#$#$ Ubezpieczenia Sp.J. &nbsp;|&nbsp; 31-475 Kraków ul. STREET1 &nbsp;|&nbsp; 32-700 Bochnia ul. STREET2 &nbsp;|&nbsp; 32-800 Brzesko ul. STREET 3 &nbsp;|&nbsp; <a href="http://k#$#$#$#$#$#$#$.com/" target="_blank">www.kr#$#$#$#$#$#$#$.com</a></span>
    </div>

</div>
</body>
</html>

你可以帮帮我吗？我会非常乐于助人！

Answer 1

大多数邮件客户端不支持样式表。允许使用一些内联样式。通常不支持定位以防止电子邮件转发其容器 - 想象一下电子邮件试图欺骗Gmail菜单或类似的东西。

一般来说：

使用表格进行布局
使用内联样式

要获得支持的好公会，请参阅：

http://www.campaignmonitor.com/css/

Answer 2

电子邮件很奇怪，你几乎需要使用10年前的html来使其正常工作。许多客户剥离了头部的大部分内容（包括实际的身体标签）。这包括gmail，yahoo，hotmail等。他们只保留某些东西。有些人保留风格，但不是全部。

我建议你将你的风格从头部移开，并使用style =“”属性将它们内嵌到标签中并使用表格（回想90年代）

所以你可能会有这样的事情：

<table width="100%">
<tr>
  <td id="osoba" style="">..Osoba...<td>
  <td id="logo" style="">..logo..</td>
</tr>
<tr>
  <td id="footer" style="">...footer...</td>
</tr>
</table>

注意：为了澄清目的，我把id放在那里，但是因为我们删除了你的id，所以没有必要。

Answer 3

我做到了！它看起来像我想要的。 ;）使用表格进行布局对我来说是一种精神上的痛苦，但它有效！ ; P谢谢你的帮助！

以下是有类似问题的人的代码：

<html>
<head>
<meta charset="utf-8">
<title>www.#¤#¤#¤#¤#¤#¤#¤#¤#.com</title>


</head>

<body>
<table width="100%" align="center">
    <tr>
        <td colspan="4" style="width:100%; height:5px; background-color:#818285"></td>
    </tr>

    <tr style="color: #818285;" align="center">   

        <td width="20%"></td>
        <td align="right" width="24%">
                <div style="text-align:left; width:180px; right:0%; color:#818285;">

                <a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/o-nas" target="_blank">Marcjusz K#¤#¤#¤#¤#¤#¤#¤#¤#</a><br>
                +48 500 000 000<br>
                <a style="color:#818285; text-decoration:none;" href="mailto:marcjusz@k#¤#¤#¤#¤#¤#¤#¤#¤#.com">marcjusz@k#¤#¤#¤#¤#¤#¤#¤#¤#.com</a>
                </div>

        </td>    

        <td align="center" width="4%" style="font-size:2em; color:#818285;"></td>

        <td align="left" width="52%">
            <a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/" target="_blank"><img src="http://#¤#¤#¤#¤#¤#¤#¤#¤#.pl/tem/logo-poziom300.jpg"></a>
        </td>

    </tr>


    <tr><td colspan="4" style="font-size:11px; background-color:#818285; color:#FFF;    text-align:center; padding: 5px; ">
        <span> K#$#$#$#$#$#$#$# Ubezpieczenia Sp.J. &nbsp;|&nbsp; 31-475 Kraków ul. STREET 6a &nbsp;|&nbsp; 32-700 Bochnia ul. STREET 14 &nbsp;|&nbsp; 32-800 Brzesko ul. STREET 3 &nbsp;|&nbsp; <a style="color:#FFF; text-decoration:none;" href="http://k#$#$#$#$#$#$#$#$#.com/" target="_blank">www.k#$#$#$#$#$#$#$#.com</a></span>
    </td></tr>
</table>

</body>
</html>

Outlook页脚+ HTML + CSS - 如何操作才能使用？

3 个答案: