1

ヘッダーの下とフッターの上のページの中央で、背景の前にメイン コンテンツを表示する方法を知りたいです。たとえば、このサイトのように。 http://cdn.webfactore.co.uk/web_design_example_551_large.jpg 高さや幅などを扱っているかどうかはわかりません。お願い助けて。中央の背景の前にメイン コンテンツを表示するにはどうすればよいですか?

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 に答える