1

ヘッダー、フッター、および背景画像の自動サイズ変更に関しては、 bulgari.comに似たレイアウトを再現しようとしています(bulgari.com には背景としてフラッシュ ムービーがあることは知っていますが、自動サイズ変更される画像を使用する必要があります)。コンテンツ div に）。私はcssとjqueryのデコードが得意ではないので、誰かが数分時間を割くことができれば、ヘッダーとフッターをコンテンツdivの上に浮かせ、ドキュメントのロードとウィンドウでコンテンツの背景画像のサイズを変更する方法を知りたいですイベントのサイズを変更します。

ここまでやってきましたが、かなり基本的なものです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var divheight = $(document).height() - $(".header").height() - $(".footer").height();
    $(".main-container").height(divheight);
});

// for the window resize
$(window).resize(function() {
    var divheight = $(document).height() - $(".header").height() - $(".footer").height();
    $(".main-container").height(divheight);
});

//-->
</script>
</head>

<body class="bg">
<div class="header"></div> <!-- header end -->

<div class="main-container">
    <div class="content">abc</div>
</div> <!-- main-container end -->

<div class="footer"></div> <!-- footer end -->

<div class="bg-container"></div> <!-- bg-container end -->
</body>
</html>

レイアウト.css:

@charset "utf-8";
/* CSS Document */

.bg {
    background: url(../images/thematic.jpg) repeat scroll;
}
.header {
    background: transparent url("../images/trans.png") repeat scroll 0 0;
    height: 80px;
    min-width: 990px;
    width: 100%;
    z-index: 100;
}
.bg-container {
    background: #F00;
}

.footer {
  background: url("../images/trans.png") repeat scroll 0 0 transparent;
  bottom: 0;
  font-size: 10px;
  height: 30px;
  left: 0;
  min-width: 990px;
  overflow: hidden;
  width: 100%;
}
.content {
    width: 990px;
    margin: 0px auto;
    background: #999;
}
.main-container {
    min-height: 500px;
    width: auto;
}
4

2 に答える 2

0

別のサイトをコピーしても、それは役に立ちません。しかし、フローティングヘッダーとフッターに関する限り、それらが上下に固定され、他のコンテンツの上に表示されることが必要な場合は、純粋な css を使用して簡単に実現できます。

HTML:

<header id="fixedhead">
Your header content goes here
</header>

<footer id="fixedfoot">
Footer content
</footer>

CSS:

#fixedhead{
position: absolute;
z-index:1000;
top: 0;
bacground-color: rgba(0,0,0,0.5) /*50% transparent black background*/
}
#fixedfoot{
position: absolute;
z-index:1000;
bottom: 0;
bacground-color: rgba(0,0,0,0.5) /*50% transparent black background*/
}
于 2014-06-23T11:22:41.503 に答える
0

これはあなたが求めているものですか？http://jsfiddle.net/7jd7t/
私がしたことは、体の背景を固定に設定し、背景サイズを 100% に設定することだけでした。スクリプト作成は不要です。

これがあなたの求めているものではない場合は、お気軽にお知らせください...

于 2012-08-22T16:54:49.083 に答える