Question

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

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

一个主要问题：通知栏覆盖在网页顶部，而不是向下推送网页。由此产生的效果是通知栏覆盖顶部徽标的一部分，这是一个很大的禁忌。

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

Answer 1

添加新的＆lt; div＆gt;在＆lt; body＆gt;下面的部分标签的高度为80px。为它提供您想要的任何CSS样式，并将通知栏添加为＆lt; div＆gt;

的子元素

实施例。让我们说这是你的网站：

<!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>

Answer 2

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

body {
    margin-top: 80px;
}

Answer 3

如果我理解这个通知栏来来去去，那就不是永久性的......

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

另一件事：弄乱身体的衬垫和边缘是不好的做法。对于这种情况，我建议在整个页面周围有一个包装div。

Answer 4

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

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

并为该元素设置margin-top：

#wrapper {margin-top:80px;}

如何向下（垂直）“移动”整个网站？

4 个答案: