0

我为客户做了一个简单的网页设计。

3 个月后，客户希望在顶部安装一个通知栏。简单的。跳到 CodeCanyon 并找到了一个可行的脚本，节省了我几个小时。

一大问题：通知栏覆盖在网页上方，而不是向下推动网页。结果是通知栏覆盖了顶部徽标的一部分，这是一个很大的禁忌。

有没有一种简单的方法可以将整个网页设计“移动”80px，而不必重新做所有的 CSS？

4

4 回答 4

2

在 <body> 标记下方添加一个新的 <div> 部分，高度为 80 像素。给它你想要的任何 CSS 样式并将通知栏添加为 <div> 的子元素

例子。假设这是您的网站：

<!doctype>
<html>
<body>
   Some existing content
</body>
</html>

然后添加横幅很容易：

<!doctype>
<html>
<body>
   <div style="height:80px;background:red;">Some div content. Put whatever controls you want here</div>
   Some existing content
</body>
</html>
于 2013-05-24T05:36:35.423 回答
2

最简单的方法之一是设置margin-top为body：

body {
    margin-top: 80px;
}
于 2013-05-24T05:43:52.400 回答
0

如果我理解正确，这个通知栏来来去去，它不是永久存在的......

如果它是 CodeCanyon 脚本，它可能有一个用于触发脚本时的回调方法。只需使用该方法（或您用于启动脚本的代码）将整个页面的包装器设置为下面 80px（就像我之前的答案所述）。并在脚本完成时将其缩小（可能是脚本中的完成事件方法？）。

另一件事：弄乱身体的填充和边距不是一个好习惯。对于这种情况，我建议在整个页面周围放置一个 div。

于 2013-05-24T06:04:00.593 回答
0

将所有 html 数据包装到一个 div 中：

<div id="wrapper">
    <!-- html data -->
</div>

并为该元素设置 margin-top：

#wrapper {margin-top:80px;}
于 2013-05-24T18:20:22.653 回答