Question

我想知道如何让主要内容出现在页眉中间和页脚下方页面中间的背景前面。比如在这个网站上。 http://cdn.webfactore.co.uk/web_design_example_551_large.jpg我不确定它是否涉及高度和宽度或其他任何问题。请帮帮我。如何让主要内容出现在中间的背景前？

Answer 1

这是一个快速的HTML5骨架

<!doctype html>

<html>

<head>

</head>

<body>

  <header>

    <div id="header-wrapper">


    </div> 

  </header>


  <div id="content">



  </div>


  <footer>

    <div id="footer-wrapper">


    </div>

  </footer>


</body>

</html>


html,
body {
  background: #ccc;
  font: 62.5% Arial, Helvetica, sans-serif;  /* --- Setting body font at 62.5% makes 1.2em equal to 12px --- */
  line-height: 1.7em;
  letter-spacing: 1px;
  color: #222;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
header {
  background: #555;
  position: relative;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0;
}
#header-wrapper {
  width: 960px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}
#content {
  background: #fff;
  position: relative;
  width: 960px;
  height: auto;
  margin: 0 auto;
  padding: 0;
}
footer {
  background: #555;
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
}
#footer-wrapper {
  width: 960px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

如何让主要内容出现在中间的背景前？

1 个答案: