Podczas tworzenia dowolnej aplikacji internetowej projekt strony internetowej musi być atrakcyjny i wciągający wizualnie. Kilka właściwości CSS można użyć do projektowania stron internetowych, w tym „przejście”, „animacja”, „granica”, „tło-img” i wiele innych. Minimalne i maksymalne wysokości mogą określić przejście elementu. Jednak nie ma czasu na przejście, gdy „Wysokość: Auto".

Ten post określi:

• Jak dodać listy w „A”div" Pojemnik?
• Jak przejść wysokość 0; na wysokość automatycznego; Korzystanie z CSS?

Jak dodać pozycje listy w pojemniku „Div”?

Wypróbuj podany proces krok po kroku, aby dodać wymienione dane w „div" pojemnik.

Krok 1: Utwórz pojemnik „Div”

Najpierw utwórz pojemnik „Div”, wykorzystując „”Element i wkładanie„klasa" atrybut "Main-Div".

Krok 2: Włóż nagłówek

Następnie wstaw nagłówek za pomocą „

„Tag, który służy do dodania nagłówka poziomu pierwszego.

Krok 3: Utwórz listę danych

Użyj „

„Tag, aby utworzyć listę nieopisaną w kontenerze. Przypisz go także identyfikator „element listy". Następnie dodaj tekst w formie listy za pomocą „
• ”Tag. „„
• „Element służy do przedstawienia elementu na liście:
  
  

  Utwórz listę przedmiotów

  
  
  
  
  • język angielski
  
  
  • Informatyka
  
  
  • Matematyka
  
  
  • Nauka
  
  
  • Studia społeczne
  
  
  
  

  Wyjście

  Jak przejść wysokość 0; na wysokość automatycznego; Korzystanie z CSS?

  Aby przejść wysokość elementu z wysokości ”0" Do "automatyczny”Korzystając z CSS, wykonaj poniższe czynności.

  Krok 1: Lista kontenerów „Div” stylu „Div”

  Uzyskaj dostęp do div "klasa”Z pomocą nazwy klasy„.menu główne”I list za pomocą przypisanego identyfikatora„#Lista przedmiotów". Następnie zastosuj nieruchomości poniżej na liście:

  .Main-menu #lista-Items
  Max-Height: 0;
  przejście: maksymalna wysokość 0.12S łatwe;
  Olflow: ukryty;
  Tło: #C1D7F5;
  Styl graniczny: podwójny;
  Margines: 0px 50px;
  

  Tutaj:

  • "maksymalna wysokość”Służy do ustawienia maksymalnej wysokości elementu. Zatrzymuje wykorzystywaną wartość właściwości wysokości przed zwiększeniem maksymalnej wysokości. W tym określonym scenariuszu wartość maksymalna jest ustalana jako „0".
  • "przemiana”W CSS pozwala użytkownikom łatwo zmieniać wartości właściwości na określony czas trwania.
  • "przelewowy”Służy do zdefiniowania zachowania elementu, gdy zawartość elementu przepełnia. Aby to zrobić, wartość tej właściwości jest ustalana jako „ukryty".
  • "tło„Właściwość służy do ustawienia koloru na tylnej części elementu.
  • "styl graniczny„Właściwość określa styl zdefiniowanej granicy.
  • "margines„Przydziela przestrzeń poza zdefiniowaną granicą.

  Wyjście

  Krok 2: Zastosuj pseudo klasę „Podnoszenie”

  Zastosować „unosić się„Wpływ na liście, najpierw uzyskaj dostęp do elementu„ Div ”według klasy„ Main-Div ”wzdłuż„:unosić się„Pseudoklasa. Następnie określ „maksymalna wysokość" I "przemiana„Właściwości, aby ustawić efekt zawisu:

  .Main-Menu: Hover #List-Items
  przejście: maksymalna wysokość 0.Z łatwością 20s;
  Max-Height: 400px;
  

  Na przykład „„przemiana„Wartość właściwości jest ustalana jako„Max-Height 0.20s" I "maksymalna wysokość”Jest ustawiony jako„400px".

  Wyjście

  Nauczyliśmy cię, jak przejść wysokość ”0" Do "automatyczny„Korzystanie z CSS.

  Wniosek

  Aby przejść wysokość ”0" Do "automatyczny”Korzystając z CSS, najpierw utwórz pojemnik„ Div ”i dodaj listę, używając„

  ". Następnie określ pozycję na liście za pomocą „
  • ”Tag. Następnie uzyskaj dostęp do elementu listy i zastosuj właściwości CSS „maksymalna wysokość" Jak "0" I "przemiana" Jak "0.12s". Następnie użyj „:unosić się„Pseudoklasa i ponownie zastosuj właściwości„ Max-Height ”i„ Transition ”. Ten samouczek pokazał metodę przejścia wysokości od 0 do automatycznego za pomocą CSS.