Cách thực hiện - Tin nhắn 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, v.v.
Tạo chú thích
Bước 1) Thêm HTML:
Ví 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 có khả năng đóng thông báo chú thích, hãy thêm phần tử <span> có thuộc tính onclick
có nội dung "khi bạn nhấp vào tôi, hãy ẩn phần tử cha của tôi" - đó là vùng chứa <div> (class="alert") .
Mẹo: Sử dụng thực thể HTML " ×
" để tạo chữ cái "x".
Bước 2) Thêm CSS:
Tạo kiểu cho hộp chú thích và nút đóng:
Ví 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;
}
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Tin nhắn cảnh báo .
Mẹo: Ngoài ra, hãy xem Ghi chú .