HTML（5）布局/结构帮助 - 初学者

Question

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

如果我理解正确，我会在某些地方阅读将标题图片放在包装器外面，其他人说在内部。

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

Answer 1

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

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

这样，虽然它可能看起来很糟糕，但你会得到所需的行为，那些包装中的元素具有'普通'宽度，而另一个则默认为全宽。

了解其工作原理here。

这是必不可少的（并且也是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; }

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