3

我不是一个经验丰富的 html 编码器，所有这些都是在没有任何专业帮助的情况下完成的，所以结果看起来很古怪。网站：www.cakery.co.il/beta 我有浮动和展开问题（如 Dreamweaver 所述） - 当我进入我的网站并尝试调整窗口大小时，顶部（蓝色）功能区和底部功能区被切断看起来很奇怪。

我怎样才能解决这个问题？

例如，这是 css 中的顶部功能区代码：

#blue_decoration {
    height: 85px;
    background-image: url(_images/top_stripe.png);
}

我会很感激你的帮助。

谢谢

4

1 回答 1

0

如果没有看到其余的情况，很难确切地看到问题是什么，但我仍然可以给出一些指示。

如果您愿意，我会 PM 链接，但您可以轻松复制粘贴以下内容以自己查看：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />        
<title></title>
    <style>
    #blue_decoration {
        height: 85px;
        background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
    }
    #bottom_blue_decoration {
        height: 30%;
        background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
    }

</style>
</head>
<body>
<header id="blue_decoration"> Hello World</header><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<footer id="bottom_blue_decoration"> don't collapse me! </footer>
</body>
</html>

您可能会注意到它在屏幕上重复出现，没有很多问题。但是，没有与样式相关的职位；相反，它取决于内容不崩溃。可以说，指定顶部和底部定位可能会更好。另一件事是您可能正在重用 id - 严格来说，应该在给定页面上只使用一次。这很容易解决 - 只需将该样式指定为一个类（使用点而不是哈希）并使用关键字 class 而不是 id 调用它。

尝试使用背景大小的非绝对值，而是使用响应百分比。一个重要的问题是：您是否希望任何内容涵盖此背景？如果您希望它是没有任何内容的图像，您最终可能会更好地使用<img>标签......

于 2012-11-03T11:24:55.803 回答