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
Making a wrapper in HTML5 / CSS3
提问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 中,因为我发现更容易控制完整的内容