css - HTML(5) 布局/结构帮助 - 初学者

Question

我特别想知道包装器以及如何构建网站。我将所有内容包含在 960 像素以内，标题图像(位于导航下方)除外。我在下面附上了一张图片。

如果我没有理解错的话，我在某些地方读到过将页眉图像放在 wrapper 外面，其他人则说在里面。

任何澄清将不胜感激，我知道有很多方法可以做到这一点，但我希望它非常干净并遵守最新标准。我正在使用 HTML5，但这并不重要。

Answer 1

您可以创建一个包装类，但只在您需要的地方使用它。所以，在你的情况下，它会像这样......

• Logo /导航(包装类)
• 标题
• 内容(包装类)
• 页脚(宽的)
• 页脚(包装类)

这样一来，虽然它可能看起来被切掉了，但您会得到所需的行为，包装器中的那些元素具有“正常”宽度，而其他元素默认为全宽。

看看它是如何工作的 here .

这是必不可少的(也是 SO 强制执行的):

div {background: #eee; height: 50px;}
div.wrapper {background: #ccc; width: 200px; margin: auto;}

编辑

因为你想把你的页脚放在一起，而不是分成两个单独的部分(这很有意义)，你可以这样做，它也有效:

<div id="footer">
    <div class="wrapper"></div>
</div>

如果你不想让你的宽元素缩放，你也可以定义它们的宽度……比如为它们设置一个更大的包装器。您还可以将背景居中，而不必担心(感谢@kennypu)。一旦你驯服了你的 wrapper ，就有很多选择。

注意:我可能没有使用正确的术语，因为包装器只包装网站的一部分而不是整个网站(也许您可以将其视为限制器)，但您明白了。