Html 在 HTML5 / CSS3 中制作包装器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9087332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:12:02  来源:igfitidea点击:

Making a wrapper in HTML5 / CSS3

htmlcss

提问by Clarkey

I'm writing a new website in HTML5 and CSS3. I need to make some inner wrappers to center the content (960px wide). I usually do this via something like

我正在用 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>

However, I am new using the new HTML 5 elements such as header, nav, article etc and am wondering the best way to make a wrapper similar to above but in a better way?

但是,我是使用新的 HTML 5 元素(例如标题、导航、文章等)的新手,并且想知道制作与上述类似但更好的包装器的最佳方法?

采纳答案by Kebman

This is actually legal:

这实际上是合法的:

<!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>

However, it is probably advicable to simply use <body>as a wrapper. After all, it's cleaner and adds less HTML.

然而,简单地<body>用作包装器可能是可取的。毕竟,它更干净,添加的 HTML 更少。

回答by Jim

If you are looking for alternative methods, you can also use the body

如果您正在寻找替代方法,您也可以使用 body

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

回答by Rich Bradshaw

Well, use a nav element for the nav, otherwise the div is fine for dividing it up.

好吧,为导航使用导航元素,否则 div 可以很好地将其分割。

回答by Carol Giles

I still place everything in a wrapper div even using header, nav, footer, main as I find it easier to control complete content

即使使用页眉、导航、页脚、主要,我仍然将所有内容放在包装器 div 中,因为我发现更容易控制完整的内容