如何操作 - 标注消息

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

大喊

标注消息通常位于页面底部，以通知用户一些特殊信息：提示/技巧、折扣、所需操作等。

创建标注

步骤1）添加HTML：

示例

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

如果您希望能够关闭标注消息，请添加一个带有onclick属性"when you click on me, hide my parent element" - 这是容器 <div> (class="alert")。

提示：使用 HTML 实体“×" to create the letter "x"。

步骤2）添加CSS：

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

示例

/* Callout box - fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}

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

/* Callout container/body */
.callout-container {
padding: 15px;
background-color: #ccc;
color: black
}

/* Close button */
.closebtn {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
color: lightgrey;
}

亲自试一试 »

提示：还请查看警报信息。

提示：还请查看笔记。