html - 如何使用 CSS 定位横幅和导航栏

Question

我正在寻找创建一个网站，但我遇到了一些麻烦。我看到所有这些不同的术语，如浮动和拳击等，但我很困惑我用什么来定位这些项目。这是我在这个网站上的意思的一个很好的例子http://happycog.com/

如何使页眉成为屏幕的某个空间，另一个导航和另一个下方的区域以及另一个页脚等。

如果您理解我的意思并可以指导我获得一些帮助/教程，我将不胜感激。谢谢

score 2 · Accepted Answer

为了补充 pomologue 的答案，可能会让您对您正在查看的网站感到困惑的一件事是，当用户滚动时，他们将菜单栏固定在屏幕的顶部。他们是用javascript做的，所以如果你不能用 CSS 做，不要自责！如果您真的想在 js 中这样做，请回复评论，我会给您一些指示:)

score 0 · Accepted Answer

从您发布的示例中，您正在寻找称为粘性标题/持久标题的东西。

由于您引用的示例被锁定到特定的 div和屏幕位置，因此获得您所要求的内容的机会可能会涉及 JavaScript 。

如果您只是在寻找标头始终位于顶部的持久标头部分，无论如何 - 那么这个链接在 CSS 中有一个很好的实现：

至于像http://happycog.com/这样更动态的，那么 CSS-Tricks 有一个很棒的教程，但它也涉及到 JQuery。

此外，Google、Firebug/Chrome 开发者工具和其他相关工具都是你的朋友。

祝你好运！

score 0 · Accepted Answer

您提供的网站只是一个接一个地放置div：

    <div id="first block"> ... </div>
    <div id="second block"> ... </div>

如果您想要类似的结果，也许这会有所帮助： http: //www.insitedesignlab.com/how-to-make-a-single-page-website/

score 0 · Accepted Answer

View Source 和 Firebug/Web Inspector 是你的朋友。在最简单的情况下，您想要做的只是一系列<div>带有样式的标签。

<div id="header">...</div>
<div id="navigation">...</div>
<div id="content">...</div>
<div id="footer">...</div>

4 回答 4