Lors de la création d'une application Web, la conception du site Web doit être visuellement attrayante et engageante. Plusieurs propriétés CSS peuvent être utilisées pour concevoir des pages Web, notamment la «transition», «l'animation», «Border», «Background-IMG» et bien d'autres. Les hauteurs minimales et maximales peuvent spécifier la transition de l'élément. Cependant, il n'y a pas de temps pour une transition lorsque le «Hauteur: Auto".

Ce message indiquera:

• Comment ajouter des éléments de liste dans un «div" Récipient?
• Comment transmettre la hauteur 0; à la hauteur automatique; Utilisation de CSS?

Comment ajouter des éléments de liste dans un conteneur «div»?

Essayez le processus étape par étape donné pour ajouter des données répertoriées dans un «div" récipient.

Étape 1: Créez un conteneur «div»

Tout d'abord, créez un conteneur «div» en utilisant le ««Élément et insérant un«classe" attribut "div".

Étape 2: insérer un titre

Ensuite, insérez une rubrique à l'aide du «

”Tag qui est utilisé pour ajouter un titre de niveau un.

Étape 3: Créer une liste de données

Utilisez le «

”Tag pour créer la liste non ordonnée dans le conteneur. Affectez-le également un ID "liste de listes". Après cela, ajoutez du texte sous la forme d'une liste avec l'aide du «
• " étiqueter. Le "
• »L'élément est utilisé pour représenter un élément dans une liste:
  
  

  Créer une liste de sujets

  
  
  
  
  • Anglais
  
  
  • L'informatique
  
  
  • Mathématiques
  
  
  • Science
  
  
  • Études sociales
  
  
  
  

  Sortir

  Comment transmettre la hauteur 0; à la hauteur automatique; Utilisation de CSS?

  Pour transmettre la hauteur de l'élément de la hauteur "0" pour "auto"En utilisant CSS, suivez les étapes ci-dessous.

  Étape 1: Style «Div» Container and Item List

  Accéder au div "classe"Avec l'aide du nom de classe".menu principal"Et liste en utilisant l'ID attribué"# liste des éléments". Ensuite, appliquez les propriétés ci-dessous:

  .Main-menu # list-items
  max-height: 0;
  transition: max-height 0.12S Emplace-out;
  débordement caché;
  Contexte: # C1D7F5;
  Style de la frontière: Double;
  marge: 0px 50px;
  

  Ici:

  • "hauteur maximum”Est ​​utilisé pour définir la hauteur maximale d'un élément. Il empêche la valeur utilisée de la propriété de hauteur de l'augmentation de la hauteur maximale. Dans ce scénario indiqué, la valeur maximale est définie comme «0".
  • "transition»Dans CSS, permet aux utilisateurs de modifier facilement les valeurs des propriétés pour une durée particulière.
  • "débordement”Est ​​utilisé pour définir le comportement d'un élément lorsque le contenu de l'élément déborde. Pour ce faire, la valeur de cette propriété est définie comme «caché".
  • "arrière-plan”La propriété est utilisée pour définir la couleur à l'arrière de l'élément.
  • "style de bordure»La propriété détermine le style de la frontière définie.
  • "marge"Alloue un espace à l'extérieur de la frontière définie.

  Sortir

  Étape 2: Appliquer une pseudo-classe «en survol»

  Pour appliquer le «flotter«Effet sur la liste, accédez d'abord à l'élément« div »par classe« Main-DIV »le long du«:flotter”Pseudo-classe. Ensuite, spécifiez le «hauteur maximum" et "transition»Propriétés pour définir l'effet de survol:

  .Main-menu: Hover # list-items
  transition: max-height 0.Emplacement des années 20;
  max-height: 400px;
  

  Par exemple, le «transition«La valeur de la propriété est définie comme«max-height 0.20s" et "hauteur maximum"Est défini comme"400px".

  Sortir

  Nous vous avons appris à transmettre la hauteur «0" pour "auto”Utilisation de CSS.

  Conclusion

  Pour transmettre la hauteur "0" pour "auto"En utilisant le CSS, créez d'abord un conteneur" div "et ajoutez une liste en utilisant le"

  ". Ensuite, spécifiez l'élément dans la liste à l'aide du «
  • " étiqueter. Ensuite, accédez à l'élément de liste et appliquez les propriétés CSS "hauteur maximum" comme "0" et "transition" comme "0.12s". Après cela, utilisez le «:flotter«Pseudo-classe et appliquez à nouveau les propriétés« max-hauteur »et« transition ». Ce tutoriel a démontré la méthode de transition de la hauteur de 0 à l'auto à l'aide de CSS.