Jak tworzyć: Tworzenie komunikatu wywoływany

Naucz się, jak używać CSS do tworzenia komunikatów wywoływanych (Callout Message).

Komunikat wywoływany

Komunikat wywoływany zwykle znajduje się na dole strony i służy do informowania użytkownika o specjalnych sprawach: wskazówki/porady, zniżki, działania do podjęcia itp.

Spróbuj sam

Stwórz komunikat wywoływany

Krok 1 - Dodaj HTML:

<div class="callout">
  <div class="callout-header">Nagłówek komunikatu wywoływany</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>Some text...</p>
  </div>
</div>

Jeśli chcesz wyłączyć funkcję zamknięcia komunikatu wywoływany, dodaj <span> element i ustaw mu onclick atrybut, który oznacza "ukryj rodzica, gdy klikniesz mnie", to kontener <div class="callout">。

Wskazówka:Użyj HTML-entuty "&:times;"Stwórz literę "x"."

Krok 2 - Dodaj CSS:

Ustawienia stylu dla ramki komunikatu wywoływany i przycisku zamknięcia:

/* Ramka komunikatu wywoływany - umieszczona na dole strony */
.callout {
  pozycja: stała;
  dolna: 35px;
  prawo: 20px;
  lewo: 20px;
  maksymalna szerokość: 300px;
{}
/* Tytuł komunikatu wywoływany */
.callout-header {
  wypełnienie: 25px 15px;
  tło: #555;
  rozmiar czcionki: 30px;
  kolor: biały;
{}
/* Kontener/tytuł komunikatu wywoływany */
.callout-container {
  wypełnienie: 15px;
  kolor tła: #ccc;
  kolor: czarny
{}
/* Przycisk zamknięcia */
.closebtn {
  pozycja: absolutna;
  góra: 5px;
  prawo: 15px;
  kolor: biały;
  rozmiar czcionki: 30px;
  kursor: wskaźnik;
{}
/* Zmiana koloru przy nawigacji myszą */
.closebtn:hover {
  kolor: jasny szary;
{}

Spróbuj sam

Strony związane

Tutorial:Jak utworzyć komunikat ostrzegawczy

Tutorial:Jak utworzyć notatkę