如何做 - 撥出訊息
瞭解如何使用 CSS 建立撥出訊息。
撥出
撥出訊息通常位於頁面底部，用於通知使用者一些特別內容：提示/技巧、折扣、需要操作的事項等。
建立撥出
步驟 1) 新增 HTML
示例
<div class="callout">
<div class="callout-header">撥出標題</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>一些文字...</p>
</div>
</div>
如果您希望能夠關閉撥出訊息，請新增一個 <span> 元素，併為其設定一個 onclick 屬性，說明“當我被點選時，隱藏我的父元素”——即容器 <div> (class="alert")。
提示：使用 HTML 實體 "×" 來建立字母 "x"。
步驟 2) 新增 CSS
樣式化撥出框和關閉按鈕
示例
/* 撥出框 - 固定在頁面底部 */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* 撥出標題 */
.callout-header {
padding: 25px 15px;
background: #555;
font-size: 30px;
color: white;
}
/* 撥出容器/正文 */
.callout-container {
padding: 15px;
background-color: #ccc;
color: black
}
/* 關閉按鈕 */
.closebtn {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* 滑鼠懸停時更改顏色 */
.closebtn:hover {
color: lightgrey;
}
自己動手試一試 »
提示: 另請檢視 警告訊息。
提示: 另請檢視 筆記。
