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