1

我正在尝试制作一个示例网页来熟悉 HTML5，并且我想尝试复制 Facebook 的页面布局；即跨越整个屏幕宽度的页眉、底部的小页脚和三栏主体，由左侧的链接列表、中间的主要内容和可选部分组成在右侧（用于广告、框架等）。它很整洁，可以在多种窗口大小中很好地显示。

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

有人可以告诉我如何实现我想要的外观吗？我已经尝试过使用我通过 Google 阅读到的一些 CSS 属性，但我很确定我不知道自己在做什么，并且真的可以使用一些指导。

谢谢！

4

4 回答 4

0

Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both

Hope it might help.

于 2012-12-15T05:03:46.367 回答
0

I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!

*Edit: meant "interactive" there, not "responsive."

于 2012-12-15T05:07:27.890 回答
0

这不是一个 HTML5 问题，而是对 HTML 和 CSS 的基本理解。如果你要进入网络开发，你需要了解基本的 CSS，比如浮动等。我会推荐一些 YouTube 或 NetTuts 上的教程。只需使用几个 div，在页面中移动它们，使用 CSS 操作它们，它就会开始融合在一起。然后制作一个带有固定页眉和页脚的三列布局看起来就像小菜一碟。

带 CSS 的浮动 div

于 2012-12-15T05:00:40.060 回答
0

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

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

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

于 2012-12-15T05:00:49.200 回答