Question

我是HTML和CSS的新手，对这个论坛来说还是全新的。目前我正在工作 - 正如我所知 - 在我想要作为电子邮件发送的网页上。它是一个非常简单的格式，带有标题，子标题，正文和页脚。虽然我几乎完成了页面，但我仍然很少了解编码。我现在所困扰的是伸展头部＆amp;页脚边缘（纯色）（顶部，左侧和右侧表示标题＆amp;子标题和左侧，右侧和底部 for footer ）。

我自然做了很多研究，查看了帮助论坛并尝试了那里发现的提示，即。重置css，设置保证金等。显然我没有成功，所以我在这里。

以下是通过Google Chrome开发人员工具在iPhone 5上显示网页内容的快照

HTML标头

<head>
     <div class="header-background" style="margin-top:0;">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Vorstellung – Ether</title>
        //content
     </div>
</head>

CSS标头

.header-background {
  background: #899799;
  border: 0px solid #467813;
  border-radius: 0px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 10px 0px 10px 20px;
  left:0;
  right:0;
  margin:0;
  top:0;
}

.sub-header {
  background: #23313B;
  border: 0px solid #467813;
  border-radius: 0px;
  color: #969696;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 10px 0px 10px 20px;
}

HTML页脚

<footer class="email-footer">
    <div id="footer-content">
      <div id="wrapper">
         <p>
           <address>
                <div style="margin-left:20px">
                <span style="color: #DDD">Name<br> 
                Street<br>
                State<br>
                Country
                <br />
                <br />
                Copyright</span><br />
                </div>
          </address>
        </p>
      </div>
    </div>
</footer>

CSS页脚

.email-footer {

}

#footer-content {
    text-decoration: none;
    font-family: "Arial", "Helvetica", "sans-serif";
    color: #ccc;
    width: 100%;
    background: #6e6e6e;
    padding: 50px 0px;

}

非常感谢任何有关改进代码的帮助和提示！

谢谢，阿希什

P.S。我正在使用Dreamweaver CS5。

Answer 1

你的问题是身体的某些风格是自动设定的。

因此，如果您不想使用默认值，则必须覆盖它们。

在您的情况下，正文的边距样式设置为8.因此，如果您不想在代码中使用边距，则必须用0覆盖它：

*{
    margin: 0;
}

星形元素将覆盖你html中的所有元素并将边距设置为0.确保它在所有内容之前，因为如果你在css的某个地方更改边距，你就不想覆盖它与0。

Answer 2

您是否尝试过在CSS中使用宽度和高度

例如：

height: 100%;
width: 100%;

Answer 3

欢迎。当您使用此HTML时，了解各种电子邮件模板可从Mailchimp和CampaignMonitor等网站获得，这可能会对您有所帮助。这些模板很有用，因为这些组织已经为您完成了大量艰苦的工作，确保模板在不同的电子邮件客户端中工作。

也就是说，如果将主体的CSS设置为零边距和填充，则每个内容区域的宽度可以为100％，以占据页面的整个宽度。

更进一步，这些内容区域可以封装在主容器中，主容器本身的宽度为100％。这样，您可以稍后通过更改该属性值来减小电子邮件的宽度。然后内容区域继承该宽度。

如何拉伸头和页脚到页面边缘？

3 个答案: