数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 创建提示消息？
提示消息就像通知，可见于页面底部。在此为用户设置优惠或优惠券。另外，如果用户对这些消息不感兴趣，它在提示消息的顶部放置了一个关闭按钮，点击即可关闭。让我们看看如何使用 HTML 和 CSS 创建提示消息。
为提示消息创建一个容器
为提示消息设置一个 div 容器，其中包括提示消息标题、信息、关闭按钮等 −
<div class="callout">
<div class="calloutHeading">Check our offers</div>
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<div class="calloutMessage">
<p>Before you leave this page don't forget to check our other offers <a href="#">Check Them</a></p>
</div>
</div>
可关闭提示消息
可关闭按钮，即关闭符号设置为在点击时不显示。这意味着，它会关闭父元素，即提示消息 −
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
关闭符号的位置是关键。我们已将它设置为绝对且位于右上角 −
.close {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
设置提示消息标题的样式
提示消息标题使用填充属性放在正确的位置 −
.calloutHeading {
padding: 25px 15px;
background: rgb(68, 93, 235);
font-size: 30px;
color: white;
}
提示消息信息
提示消息的信息设置在一个子容器中。还使用 <a> 元素添加了一个链接 −
<div class="calloutMessage"> <p>Before you leave this page don't forget to check our other offers <a href="#">Check Them</a></p> </div>
设置提示消息信息的样式。使用填充属性将其正确放置 −
.calloutMessage {
padding: 15px;
background-color: #ccc;
color: black
}
示例
使用 CSS 创建提示消息的代码如下 −
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
.calloutHeading {
padding: 25px 15px;
background: rgb(68, 93, 235);
font-size: 30px;
color: white;
}
.calloutMessage {
padding: 15px;
background-color: #ccc;
color: black
}
.close {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
.close:hover {
color: lightgrey;
}
</style>
</head>
<body>
<h1>Callout Message Example</h1>
<h3>Product 2</h3>
<h3>Product 3</h3>
<h3>Product 4</h3>
<div class="callout">
<div class="calloutHeading">Check our offers</div>
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<div class="calloutMessage">
<p>Before you leave this page don't forget to check our other offers <a href="#">Check Them</a></p>
</div>
</div>
</body>
</html>
更新于: 14-Dec-2023
699 次浏览
广告