Question

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

这是截图：

enter image description here

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

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

基本上我想要两件事：

我想将“我也是社交”文本与三个图标正确对齐，即facebook，twitter，google +
正如您所看到的，“版权区”和“保留所有权利”之间存在巨大空间。我想删除这个空间。

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

Answer 1

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

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

我建议使用 this chrome extension 来“播放”CSS更改

段落未正确对齐

1 个答案: