如何 - 呼叫信息
学习如何使用 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;
}
自己试试 »
提示： 也可以查看 提示消息.
提示： 也可以查看 笔记.
