Al crear cualquier aplicación web, el diseño del sitio web debe ser visualmente atractivo y atractivo. Se pueden utilizar varias propiedades de CSS para diseñar páginas web, incluidas "transición", "animación", "border", "background-img" y muchos más. Las alturas mínimas y máximas pueden especificar la transición del elemento. Sin embargo, no hay tiempo para una transición cuando el "Altura: Auto".

Esta publicación indicará:

• Cómo agregar ítems de lista en un "div" Envase?
• Cómo hacer la altura de la transición 0; a la altura auto; Usando CSS?

Cómo agregar elementos de lista en un contenedor "div"?

Pruebe el proceso paso a paso dado para agregar datos listados en un "div" envase.

Paso 1: crear un contenedor "div"

Primero, cree un contenedor "div" utilizando el "Elemento "e insertar un"clase" atributo "principal".

Paso 2: inserte un encabezado

A continuación, inserte un encabezado con el "

Etiqueta que se usa para agregar un encabezado de nivel uno.

Paso 3: Crear lista de datos

Utilizar el "

"Etiqueta para crear la lista desordenada en el contenedor. Además, asigne una identificación "ítem de lista". Después de eso, agregue texto en forma de lista con la ayuda del "
• " etiqueta. El "
• El elemento se usa para representar un elemento en una lista:
  
  

  Crear una lista de temas

  
  
  
  
  • Inglés
  
  
  • Ciencias de la Computación
  
  
  • Matemáticas
  
  
  • Ciencia
  
  
  • Ciencias Sociales
  
  
  
  

  Producción

  Cómo hacer la altura de la transición 0; a la altura auto; Usando CSS?

  Para hacer la transición de la altura del elemento desde la altura "0" a "auto"Usando CSS, siga los pasos a continuación.

  Paso 1: Lista de contenedores y artículos de estilo "div" de estilo

  Acceder al div "clase"Con la ayuda del nombre de la clase".menú principal"Y lista usando la ID asignada"#ítems de lista". Luego, aplique las propiedades de la lista a continuación:

  .Main-Menu #list-items
  Max-aguja: 0;
  Transición: Max-Alto 0.12
  desbordamiento: oculto;
  Antecedentes: #C1D7F5;
  estilo fronterizo: doble;
  margen: 0px 50px;
  

  Aquí:

  • "Altura máxima"Se usa para establecer la altura máxima de un elemento. Detiene el valor utilizado de la propiedad de altura al aumentar sobre la altura máxima. En este escenario establecido, el valor máximo se establece como "0".
  • "transición"En CSS, permite a los usuarios cambiar los valores de propiedad fácilmente durante una duración particular.
  • "Desbordamiento"Se usa para definir el comportamiento de un elemento cuando el contenido del elemento se desborda. Para hacerlo, el valor de esta propiedad se establece como "oculto".
  • "fondo"La propiedad se usa para establecer el color en la parte trasera del elemento.
  • "estilo de borde"La propiedad determina el estilo para el límite definido.
  • "margen"Asigna un espacio fuera del límite definido.

  Producción

  Paso 2: Aplicar la clase de pseudo "flotar"

  Para aplicar el "flotar"Efecto en la lista, primero acceda al elemento" div "por clase" principal-div "a lo largo del":flotar"Pseudo-Clase. Luego, especifique el "Altura máxima" y "transición"Propiedades para establecer el efecto de desplazamiento:

  .Main-Menu: Hover #List-items
  Transición: Max-Alto 0.20s Fase-in;
  Max-aguja: 400px;
  

  Por ejemplo, el "transición"El valor de la propiedad se establece como"Max-aguja 0.20" y "Altura máxima"Está configurado como"400px".

  Producción

  Te hemos enseñado a la altura de la transición "0" a "auto"Usando CSS.

  Conclusión

  Para hacer la transición de la altura "0" a "auto"Al usar el CSS, primero, cree un contenedor" Div "y agregue una lista utilizando el"

  ". Luego, especifique el elemento en la lista utilizando el "
  • " etiqueta. A continuación, acceda al elemento de la lista y aplique las propiedades de CSS "Altura máxima" como "0" y "transición" como "0.12s". Después de eso, utilice el ":flotar"Pseudo-Clase y aplique las propiedades" Max-Al-Alto "y" Transición "nuevamente. Este tutorial demostró el método de transición de la altura de 0 a Auto usando CSS.