标注消息

---

了解如何使用 CSS 创建标注消息。

---

标注

标注消息通常位于页面底部，以通知用户一些特别的事情:提示/技巧、折扣、需要采取的行动等。

亲自试一试 »

---

创建标注

步骤 1) 添加 HTML:

实例

<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <div class="callout-container">
    <p>Some text...</p>
  </div>
</div>

如果您希望能够关闭标注消息，请添加一个带有 onclick 属性的 <span> 元素，该属性显示"当您点击我时，隐藏我的父元素" - 这是容器 <div> (class="alert")。

提示:使用 HTML 实体 "×" 创建字母 "x"。

---

步骤 2) 添加 CSS:

设置标注框和关闭按钮的样式:

实例

/* 标注框 - 固定在页面底部的位置 */
.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

/* 标注标题 */
.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
}

/* 标注容器/主体 */
.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: black
}

/* 关闭按钮 */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* 鼠标悬停改变颜色 */
.closebtn:hover {
  color: lightgrey;
} 亲自试一试 »

提示: 另请查看 警报消息

提示: 另请查看 提示信息