Cách tạo: Tạo thông báo mở rộng

Học cách sử dụng CSS để tạo thông báo mở rộng (Callout Message).

Thông báo mở rộng

Thông báo mở rộng thường nằm ở dưới cùng của trang, để thông báo cho người dùng về một số vấn đề đặc biệt: thông báo/giải thích, giảm giá, hành động cần thực hiện等.

Thử ngay

Tạo thông báo mở rộng

Bước 1 - Thêm HTML:

<div class="callout">
  <div class="callout-header">Đầu trang thông báo mở rộng</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 tắt chức năng thông báo mở rộng, hãy thêm một <span> thuộc tính, và đặt một onclick thuộc tính, thuộc tính này biểu thị "Khi bạn nhấp vào tôi, ẩn phần tử cha của tôi", tức là容器 <div class="callout">。

Lưu ý:Sử dụng mã hóa HTML "&times;"Tạo chữ "x"."

Bước 2 - Thêm CSS:

Đặt kiểu cho hộp thông báo mở rộng và nút đóng:

/* Hộp thông báo mở rộng - cố định ở vị trí dưới cùng của trang */
.callout {
  vị trí: cố định;
  dưới: 35px;
  cạnh phải: 20px;
  cạnh trái: 20px;
  độ rộng tối đa: 300px;
{}
/* Đầu trang thông báo mở rộng */
.callout-header {
  keo dán: 25px 15px;
  màu nền: #555;
  cỡ chữ: 30px;
  màu: trắng;
{}
/* Hộp thông báo mở rộng/đầu trang */
.callout-container {
  keo dán: 15px;
  màu nền: #ccc;
  màu: đen
{}
/* Nút đóng */
.closebtn {
  vị trí: tuyệt đối;
  trên: 5px;
  phải: 15px;
  màu: trắng;
  cỡ chữ: 30px;
  con trỏ: chỉ thị;
{}
/* Thay đổi màu sắc khi con trỏ chuột trỏ vào */
.closebtn:hover {
  màu: lightgrey;
{}

Thử ngay

Trang liên quan

Giáo trình:Làm thế nào để tạo thông báo cảnh báo

Giáo trình:Làm thế nào để tạo ghi chú