html - 如何在页面底部创建一个通知栏？

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 的类。

希望这对您有所帮助。