0

問題の理解を深めるために画像を作成しました。

問題を示す画像

.bgimage と .content div のコードが必要

これは、スクリプトなしでクロスブラウザー css (IE7+ およびその他の主要なブラウザー) でも可能ですか?

4

1 に答える 1

-1

実際には予想より少し長くなりましたが、実際にあなたの写真を手に入れました。最初にさらに調査を行い、実際のコードを作成することなく、ここで再度質問しないでください。

ここにデモがあります

コード

HTML:

<body>
  <div id = "header">
  </div>
  <div id = "bgimage">
  </div>
  <div id = "content">
  </div>
  <span class = "clear"></span>
  <div id = "footer">
  </div>
</body>

CSS:

*
  {
  margin: 0;
  padding: 0;
  }

body
  {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  }

#header
  {
  width: 100%;
  height: 200px;
  background-color: purple;
  }

#bgimage
  {
  position: absolute;
  top: 200px;
  left: 0px;
  right: 50%;
  height: 600px;
  background-color: green;
  }

#content
  {
  position: relative;
  width: 700px;
  height: 600px;
  float: right;
  z-index: 2;
  background-color: blue;
  }

.clear
  {
  clear: both;
  }

#footer
  {
  position: relative;
  top: 600px;
  width: 100%;
  height: 200px;
  background-color: red;
  }

注: 私は CSS を最適化していません。そこで実行できる作業がいくつかあります。

コードもこちら

説明

コードで使用した要素 (Google で検索することをお勧めします):

  • CSS リセット
  • CSSクリア
  • 絶対配置 CSS
  • 相対位置 CSS
于 2013-05-03T00:25:30.090 に答える