CÁCH THỰC HIỆN - Thông báo chú thích
Tìm hiểu cách tạo thông báo chú thích bằng CSS.
Gọi ra
Thông báo chú thích thường được đặt ở cuối trang để thông báo cho người dùng về điều gì đó đặc biệt: mẹo / thủ thuật, giảm giá, hành động cần thiết, khác.
Tạo chú thích
Bước 1) Thêm HTML:
Thí dụ
<div class="callout">
<div class="callout-header">Callout
Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>
Nếu bạn muốn khả năng đóng thông báo chú thích, hãy thêm phần tử <span> có onclick
thuộc tính cho biết "khi bạn nhấp vào tôi, hãy ẩn phần tử mẹ của tôi" - chính là vùng chứa <div> (class = "alert").
Mẹo: Sử dụng thực thể HTML " ×
" để tạo ký tự "x".
Bước 2) Thêm CSS:
Tạo kiểu cho hộp chú thích và nút đóng:
Thí dụ
/* Callout box
- fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* Callout header */
.callout-header {
padding: 25px
15px;
background: #555;
font-size: 30px;
color: white;
}
/* Callout container/body */
.callout-container
{
padding: 15px;
background-color:
#ccc;
color: black
}
/* Close button */
.closebtn {
position:
absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* Change color on
mouse-over */
.closebtn:hover {
color: lightgrey;
}
Mẹo: Ngoài ra, hãy xem Tin nhắn cảnh báo .
Mẹo: Cũng xem Ghi chú .