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>

基本的に私は2つのことを望んでいます：

  1. 「私もソーシャルです」というテキストを、facebook、twitter、google+ の 3 つのアイコンに適切に配置したい
  2. ご覧のとおり、「Copyright Area」と「All Rights Reserved」の間には巨大なスペースがあります。このスペースを削除したい。

私のコードはあまり専門的ではありませんが、初めての 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;
}

CSS の変更を「再生」するために、この chrome 拡張機能を使用することをお勧めします。

于 2013-06-23T04:06:13.313 に答える