如何做 - 呼出消息
了解如何使用 CSS 创建呼出消息。
呼出
呼出消息通常位于页面底部，用于通知用户一些特别内容：提示/技巧、折扣、需要操作的事项等。
创建呼出
步骤 1) 添加 HTML
示例
<div class="callout">
<div class="callout-header">呼出标题</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>一些文本...</p>
</div>
</div>
如果您希望能够关闭呼出消息，请添加一个 <span> 元素，并为其设置一个 onclick 属性，说明“当我被点击时，隐藏我的父元素”——即容器 <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;
}
自己动手试一试 »
提示: 另请查看 警告消息。
提示: 另请查看 笔记。
