如何安排HTML5网页元素？

Question

我正在尝试制作一个示例网页以熟悉HTML5，我想尝试复制Facebook的页面布局;也就是说，横跨屏幕整个宽度的标题，底部的小页脚和三列主体，由左侧的链接列表，中间的主要内容和可选部分组成在右边（广告，框架等）。它很整洁，可以在多种窗口尺寸下显示。

到目前为止，我已尝试分别使用<header>，<footer>和<nav>和<section>块完成此操作。但是，页面有一些异常。当窗口最大化时，页脚（包含带有版权信息的简单文本块）显示在页眉下方页面的右上角。另一方面，当没有足够的空间来显示窗口中的所有内容时，它会将主体文本放在该部分下方。换句话说，它会保持移动元素以适应窗口。

有人可以告诉我如何实现我的目标吗？我试过玩一些我通过谷歌阅读的CSS属性，但我很确定我不知道我在做什么，并且可以真正使用一些指导。

谢谢！

Answer 1

这不是HTML5问题，而是对HTML和CSS的基本理解。如果您要进入Web开发人员，您将需要了解基本的CSS，如浮动等。我会在YouTube或NetTuts上推荐一些教程。只需要玩几个div，在页面上移动它们，用CSS操作它们就会开始融合在一起。然后使用固定的页眉和页脚制作三列布局似乎是件小事。

Floating Divs w/ CSS

Answer 2

我发现CSS非常难。要使页面看起来很好并且可以在许多不同的平台和浏览器上运行，这是非常困难的。您可能会发现使用css框架最简单，例如Bootstrap。

将其放入您的网站，并使用它来制作您的布局。使用浏览器的开发工具（firefox的Firebug）来检查应用于各种元素的样式。修改样式以满足您的需求。

HTML5并没有真正为您提供免费的页面布局。您提到的元素（header，section等）用于创建语义页面，而不是指定它们的显示方式。

Answer 3

没有你的代码就无济于事。但我确信这是因为float问题。将此CSS属性添加到页脚clear: both

希望它可能会有所帮助。

Answer 4

我不确定你是不是想让自己变成一个小黑客，或者如果你正在寻找一个完整的图书馆来为你做这一切，但如果你正在寻找后者，我建议你Twitter Bootstrap，这是一个实现许多HTML5功能的跨平台解决方案，甚至可以用于非现代浏览器的后备。唯一的缺点是需要jQuery才能初始化响应*的组件。但是，如果您不想实现these features，这是可选的。令人惊讶的是，响应式设计不需要javascript，因为它是纯CSS。希望这有帮助！

*编辑：在那里意味着“互动”，而非“响应”。