3

在为我父亲的公司创建 HTML 页脚时，我遇到了一个大问题。他们正在使用 OE 和 Outlook 10。我已经在代码上工作了很长时间，但我仍然遇到了一些问题。我可以使用外部字体吗？我应该如何使它工作？用 width: X% 定位它怎么样？

我希望它看起来像这样：

在此处输入图像描述

但它不...

这是代码：

    <!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>

你能帮我解决这个问题吗？我会很有帮助的！

4

3 回答 3

2

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

一般来说：

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

有关所支持内容的良好行会，请参阅：

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

于 2012-11-14T20:55:25.777 回答
1

电子邮件很奇怪，因为您几乎需要使用 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>

注意：我把身份证放在那里是为了澄清，但由于我们去掉了你的身份证，所以没有必要。

于 2012-11-14T21:03:05.900 回答
0

我已经做到了！它看起来如我所愿。;) 使用表格进行布局对我来说是一种精神上的痛苦，但它确实有效！;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>
于 2012-11-15T01:45:50.620 回答