在HTML5/CSS3中製作包裝器

我正在用HTML5和CSS3編寫一個新網站。我需要製作一些內部包裝以將內容居中（960像素寬）。我平時喜歡在HTML5/CSS3中製作包裝器

<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個元素，如標題，導航，文章等，我想知道的最佳方式作出類似的包裝上面，但是在更好的方法？

來源

2012-01-31 Clarkey

看看這裏 - http://html5boilerplate.com/他們利用一些最好的實踐那裏 – 2012-01-31 21:41:10

@Zoltan謝謝你的回覆，但這不是我所追求的。糾正我，如果我錯了，但我相信H5BP只是另一個Moderizr，這與我的問題無關。 – Clarkey 2012-01-31 21:44:34

不是，它不是一個單獨的腳本或像這樣的行爲。這基本上是一堆文件來啓動你的開發或原型。通常你創建文件夾，索引文件，css文件，js文件，構建這些文件--H5BP消除了這一步驟。所以你有一個開箱即用的基本網站，它有一個'index.html'（如果你向下滾動並點擊它，你可以看到標記），CSS reset/print /等等，包括一些JS文件。看看它;-)這正是你正在尋找 – 2012-01-31 22:01:47

這實際上是合法的：

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

但是，它可能是advicable簡單地使用<body>作爲包裝。畢竟，它更乾淨，並增加了更少的HTML。

來源

2013-02-09 09:22:46 Kebman

好，但那些想要使用一些「粘性」的頁腳技術，如這樣的：http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/P150 /？ – 2013-02-24 04:09:25

我只是堅持一些CSS，可能是這樣的：'body {min-height：100％; position：relative;}''footer {position：absolute; bottom：0;}'然後我確保section或article標籤的底部填充至少是頁腳的高度。 – Kebman 2013-02-25 00:02:31

我覺得你忘了頁腳{min-width：100％;}，我不會把body {position：relative;}放到頁面上，因爲它無助於下壓頁腳。不過，我想在某些場合，頁腳可能會有一種奇怪的行爲。 – 2013-03-10 22:51:23

那麼，使用導航元素的導航，否則該div是分開的罰款。

來源

2012-01-31 21:57:28

如果您正在尋找替代方法，您也可以用身體

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

來源

2012-01-31 22:22:26 Jim

我仍然放在一個包裝DIV的一切，甚至用頭，導航，頁腳，主要因爲我覺得它更容易控制完整的內容

來源

2016-01-21 15:47:58

在HTML5/CSS3中製作包裝器

回答

相關問題