1

I would like to know how to make main content appear in front of background in the middle of the page below header and above footer. Like on this site for example. http://cdn.webfactore.co.uk/web_design_example_551_large.jpg I am not sure if it deals with heights and widths or anything else. Help me please. How do I make main content appear in front of background in middle?

4

1 回答 1

0

这是一个快速的 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;
}
于 2013-09-15T04:29:44.043 回答