資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告