1

我正在尝试重现类似于bulgari.com的布局，就页眉、页脚和自动调整背景图像的大小而言（我知道 bulgari.com 有一个 flas 电影作为背景，但我需要使用自动调整大小的图像到内容 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

这就是你所追求的吗？http://jsfiddle.net/7jd7t/
我所做的只是将主体的背景设置为固定，并将背景大小设置为 100%。无需编写脚本。

如果这不是您所追求的，请随时告诉我...

于 2012-08-22T16:54:49.083 回答
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 回答