数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学科
时尚研究
法律研究如何用 CSS 创建通知按钮？
通知按钮右上角有一个独立文本，即带通知数的徽章。通知就像等待阅读的未完成消息。一旦阅读，通知数，即未完成消息将减少。我们可以用 HTML 和 CSS 轻松创建一个这样的按钮，看起来像通知图标。
创建通知容器
创建一个容器 div 以包括消息和通知徽章。它们都设置在 <> 元素中 −
<a href="#" class="notificationContainer"> <span>Messages</span> <span class="notificationBadge">99+</span> </a>
定位通知计数器
要定位容器，请将位置属性设置为相对。这样，将文本装饰属性设置为无，以删除链接中的下划线 −
.notificationContainer {
margin: 20px;
background-color: rgb(254, 255, 171);
color: black;
text-decoration: none;
padding: 15px 26px;
font-size: 32px;
position: relative;
display: inline-block;
border-radius: 2px;
border:2px solid black;
}
定位通知徽章
通知按钮右上角的徽章这样设计。位置是绝对的。这样，它使用 top 和 right 属性正确定位 −
.notificationContainer .notificationBadge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background-color: rgb(0, 170, 51);
color: white;
}
示例
以下是使用 CSS 创建通知按钮的代码 −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: monospace,serif,sans-serif;
}
.notificationContainer {
margin: 20px;
background-color: rgb(254, 255, 171);
color: black;
text-decoration: none;
padding: 15px 26px;
font-size: 32px;
position: relative;
display: inline-block;
border-radius: 2px;
border:2px solid black;
}
.notificationContainer:hover {
background: rgb(43, 8, 138);
color:white;
}
.notificationContainer .notificationBadge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background-color: rgb(0, 170, 51);
color: white;
}
</style>
</head>
<body>
<h1>Notification Button Example</h1>
<a href="#" class="notificationContainer">
<span>Messages</span>
<span class="notificationBadge">99+</span>
</a>
</body>
</html>
更新于：14-12-2023
487 次浏览
广告