Durante la creazione di qualsiasi applicazione Web, il design del sito Web deve essere visivamente attraente e coinvolgente. Diverse proprietà CSS possono essere utilizzate per progettare pagine Web, tra cui "transizione", "animazione", "bordo", "background-img" e molti altri. Le altezze minime e massime possono specificare la transizione dell'elemento. Tuttavia, non c'è tempo per una transizione quando il "Altezza: auto".

Questo post indicherà:

• Come aggiungere elenchi in un "div"Container?
• Come transizione altezza 0; in altezza automatica; Usando CSS?

Come aggiungere elenchi in un contenitore "div"?

Prova il processo passo-passo dato per aggiungere dati elencati in "div"Container.

Passaggio 1: crea un contenitore "div"

Innanzitutto, crea un contenitore "div" utilizzando il ""Elemento e inserire un"classe"Attributo"Main-Div".

Passaggio 2: inserire un'intestazione

Quindi, inserire un'intestazione usando "

"Tag che viene utilizzato per aggiungere un titolo di livello uno.

Passaggio 3: creare un elenco di dati

Utilizzare il "

"Tag per creare l'elenco non ordinato nel contenitore. Inoltre, assegnalo un ID "Elenco-Item". Successivamente, aggiungi il testo sotto forma di un elenco con l'aiuto di "
• "Tag. IL "
• "L'elemento viene utilizzato per rappresentare un elemento in un elenco:
  
  

  Crea un elenco di soggetti

  
  
  
  
  • Inglese
  
  
  • Informatica
  
  
  • Matematica
  
  
  • Scienza
  
  
  • Scienze Sociali
  
  
  
  

  Produzione

  Come transizione altezza 0; in altezza automatica; Usando CSS?

  Per passare all'altezza dell'elemento dall'altezza "0" A "auto"Usando CSS, segui i passaggi seguenti.

  Passaggio 1: Elenco contenitore "Div" di stile ed elementi

  Accedi al div "classe"Con l'aiuto del nome della classe".menu principale"Ed elenco utilizzando l'ID assegnato"#Elementi della lista". Quindi, applica le proprietà sotto l'elenco:

  .Main-Menu #Elenco-Items
  max-height: 0;
  transizione: max-height 0.12s Eason-out;
  Overflow: nascosto;
  Background: #c1d7f5;
  In stile bordo: doppio;
  Margine: 0px 50px;
  

  Qui:

  • "altezza massima"Viene utilizzato per impostare l'altezza massima di un elemento. Interrompe il valore utilizzato della proprietà in altezza dall'aumentare sulla massima altezza. In questo scenario dichiarato, il valore massimo è impostato come "0".
  • "transizione"In CSS consente agli utenti di modificare facilmente i valori delle proprietà per una durata particolare.
  • "overflow"Viene utilizzato per definire il comportamento di un elemento quando il contenuto dell'elemento trabocca. Per fare ciò, il valore di questa proprietà è impostato come "nascosto".
  • "sfondo"La proprietà viene utilizzata per impostare il colore sul retro dell'elemento.
  • "stile del bordo"La proprietà determina lo stile per il confine definito.
  • "margine"Assegna uno spazio al di fuori del confine definito.

  Produzione

  Passaggio 2: applicare la classe pseudo "hover"

  Per applicare il "molare"Effetto sull'elenco, prima accedere all'elemento" div "per classe" main-div "lungo": Hover"Classe pseudo. Quindi, specifica il “altezza massima" E "transizione"Proprietà per impostare l'effetto hover:

  .Main-Menu: Hover #Elenco-Items
  transizione: max-height 0.Ease-in degli anni '20;
  MAX-HEIGHT: 400px;
  

  Ad esempio, il “transizione"Il valore della proprietà è impostato come"Max-Height 0.20s" E "altezza massima"È impostato come"400px".

  Produzione

  Ti abbiamo insegnato come altezza di transizione "0" A "auto"Usando CSS.

  Conclusione

  Per transizione l'altezza "0" A "auto"Usando il CSS, in primo luogo, crea un contenitore" Div "e aggiungi un elenco utilizzando il"

  ". Quindi, specifica l'elemento nell'elenco utilizzando "
  • "Tag. Successivamente, accedi all'elemento elenco e applica le proprietà CSS "altezza massima" COME "0" E "transizione" COME "0.12s". Dopodiché, utilizza il ": Hover"Pseudo-Classe e applicare di nuovo le proprietà" Max-Height "e" Transition ". Questo tutorial ha dimostrato il metodo di transizione dell'altezza da 0 a automatica usando CSS.