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

Question

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

如果我理解正确，我已经在某些地方阅读过将标题图像放在包装器之外，其他人说在里面。

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

Answer 1

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

• Logo/Nav（包装类）
• 标题
• 内容（包装类）
• 页脚（宽一）
• 页脚（包装类）

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

看看这里是如何工作的。

这是必不可少的（SO 也必须这样做）：

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

编辑

而且由于您希望将页脚放在一起，而不是分成两个单独的部分（这很有意义），您可以这样做，它也可以：

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

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

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

Answer 2

你可以这样做你的代码是这样的：

HTML

<div class="page">
    <div class="header wrapper">
        <div class="inner-content">...</div>
    </div>
    <div class="main wrapper">
        <div class="inner-content">...</div>
    </div>
    <div class="footer wrapper">
        <div class="inner-content">...</div>
    </div>
</div>

CSS

.wrapper { width: 100%; }
.wrapper.header { background-color: #00f; }
.wrapper.footer { background-color: #f00; }

.inner-content { width: 960px; margin: 0 auto; }

您的包装器类将包含您的内部内容，并允许您对每个包装器应用颜色。内部内容将充当文本和图像的容器。