如何在页面底部创建通知栏？

Question

I want something like this at the bottom of the page

只是想知道如何在页面底部创建一个通知栏，以便将某些类型的内容推送给访问者。

Answer 1

你需要3件事，但由于你的问题只是用HTML标记，我将跳过它的Javascript部分。

对于HTML，你只需要一些简单的东西：

<div class="notification-bottom">
  <p>Your Message goes <a href="/yourlink">here</a></p>
  <span class="notification-close">X</span>
</div>

然后，css看起来像这样：

.notification-bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  /* Rest of your styling */
}

.notification-close {
  position: absolute;
  right: 5px;
  top: 5px;
  /* This are approximated values, and the rest of your styling goes here */
}

然后你需要一些Javascript交互来关闭它，我应该只添加一个带有display: none的类。

希望这会有所帮助。