Question

我正在用HTML5和CSS3编写一个新网站。我需要制作一些内包装来使内容居中（960px宽）。我通常通过像

这样的方式来做这件事

<style>
 .nav { height:40px; background:#000; }
 .wrapper { width:960px; margin:auto; }
</style>
<div class="nav">
 <div class="wrapper">
  Home News Blog etc etc
 </div>
</div>

然而，我是新的使用新的HTML 5元素，如标题，导航，文章等，我想知道最好的方法来制作类似于上面的包装，但更好的方式？

Answer 1

如果您正在寻找替代方法，您也可以使用身体

body{ margin: 0 auto; width: 960px; }

Answer 2

这实际上是合法的：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wrapping up HTML5</title>
</head>
<body>
<div id="wrapper">
<header><h1>Using a HTML5 wrapper</h1></header>
    <section>
        <article>
            <hgroup>
            <h1>This is actually legal</h1>
            <h2>Just wrap everything in a div, just like before</h2>
            </hgroup>
            <p>But it's probably better to simply use the body tag.</p>
        </article>
    </section>
    <footer><p>Love from Kebman</p></footer>
</div>
</body>
</html>

但是，简单地使用<body>作为包装器可能是明智之举。毕竟，它更干净，增加了更少的HTML。

Answer 3

好吧，使用nav元素作为导航，否则div可以将其分割。

Answer 4

我仍然将所有内容放在包装div中，即使使用header，nav，footer，main，因为我发现更容易控制完整内容

在HTML5 / CSS3中制作包装器

4 个答案: