如何创建 - 标注消息
了解如何使用 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 属性的 <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;
}
亲自试一试 »
提示: 另请查看 警报消息
提示: 另请查看 提示信息
