1

基本上我正在尝试使用 HTML 和 Dreamweaver 创建一个电子邮件模板。这是我的第一个模板。我不能<div>为电子邮件模板使用标签这一事实真的让我很头疼。我很难将社交图标与“我是社交文本”对齐。它们都align="center"在td标签内分配。下面显示的图像是我的电子邮件模板的“页脚”部分。

这是屏幕截图：

在此处输入图像描述

我只发布页脚部分的代码，因为我的内容和页眉部分工作正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    background: #CCC;
}
 h4.copyright, p.copyright {
    padding-left: 50px;
    color: #FFF
}
h4.social {
    padding-left: 50px;
    color: #fff;
}
p.footer {
    color: #FFF;
}
</style>
</head>

<body>

<table width="600" align="center" bgcolor="#999999">
  <tr>
    <td align="center"><h4 class="social">I am also social</h4></td>
  </tr>
  <tr>
    <td align="center"><p class="footer">
        <a href="http://www.facebook.com/trickyphotoshop">
          <img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
        </a>
        <a href="http://www.tricky-photoshop.com">
          <img src="images/g+.gif" width="25px" height="25px" />
        </a>
        <a href="http://www.twitter.com/trickyphotoshop/">
          <img src="images/twitter.gif" width="25px" height="25px" />
        </a>
      </p></td>
  </tr>
  <tr>
    <td height="10"><h4 class="copyright">Copyright Area</h4></td>
  </tr>
  <tr>
    <td height="10"><p class="copyright">
        &copy All rights reserved
      </p></td>
  </tr>
</table>
</body>
</html>

基本上我想要两件事：

  1. 我想将“我也是社交”文本与三个图标（即 facebook、twitter、google+）正确对齐
  2. 如您所见，“版权区域”和“保留所有权利”之间有很大的空间。我想删除这个空间。

我知道我的代码不是太专业，但这是我的第一个 HTML 代码。

4

1 回答 1

0

您应该按如下方式更改样式：

h4.social {
  /* remove: padding-left: 50px; */
  color: #fff;
}
h4.copyright, p.copyright {
  padding-left: 50px;
  margin: 0px; /* add this line */
  color: #FFF;
}

我建议使用这个 chrome 扩展来“玩” CSS 更改

于 2013-06-23T04:06:13.313 回答