資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立警報訊息？
警報訊息可以在網頁上看到。例如，在社交媒體網站上刪除帳戶時，可能會看到一條訊息。甚至一些網站也會以警報訊息的形式提供優惠券。其他例子包括“您的訂單已確認”或“您的密碼即將過期。請立即更新。”讓我們看看如何使用 HTML 和 CSS 建立警報訊息。
建立警報的容器
為警報訊息設定一個 div。在其中，警報訊息與關閉按鈕符號一起設定 -
<div class="alertMessage"> <span class="close" onclick="this.parentElement.style.display='none';">×</span> <strong>This cannot be revered!</strong> Your account will be deleted. </div>
設定警報樣式
我們使用 background-color 屬性為警報訊息設定了背景顏色 -
.alertMessage {
padding: 20px;
background-color: #f44336;
color: white;
font-size: 20px;
}
警報上的關閉按鈕
警報訊息上有一個可見的關閉按鈕，以便使用者閱讀後可以將其移除。關閉的符號是 x -
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
定位關閉按鈕
看起來像關閉按鈕的 x 的樣式如下。關閉按鈕使用 float 屬性（值為 right）進行定位。使用 transition 屬性設定過渡 -
.close{
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
示例
要使用 CSS 建立警報訊息，程式碼如下 -
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.alertMessage {
padding: 20px;
background-color: #f44336;
color: white;
font-size: 20px;
}
.close{
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.close:hover {
color: black;
}
</style>
</head>
<body>
<h1>Alert Message Example</h1>
<div class="alertMessage">
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<strong>This cannot be revered!</strong> Your account will be deleted.
</div>
</body>
</html>
更新於： 2023-12-14
987 次瀏覽
廣告