Ao criar qualquer aplicativo da web, o design do site deve ser visualmente atraente e envolvente. Várias propriedades CSS podem ser usadas para projetar páginas da web, incluindo "transição", "animação", "borda", "background-img" e muito mais. As alturas mínimas e máximas podem especificar a transição do elemento. No entanto, não há tempo para uma transição quando o “Altura: Auto”.

Este post indicará:

• Como adicionar itens de lista em um “div”Contêiner?
• Como fazer a transição altura 0; para altura automática; Usando CSS?

Como adicionar itens de lista em um contêiner "div"?

Experimente o processo passo a passo para adicionar dados listados em um “div”Contêiner.

Etapa 1: Crie um contêiner "div"

Primeiro, crie um contêiner "div" utilizando o "”Elemento e inserindo um“aula”Atributo“Principal-Div”.

Etapa 2: Insira um título

Em seguida, insira um título usando o “

”Tag que é usada para adicionar um título do nível um.

Etapa 3: Crie lista de dados

Utilize o “

”Tag para criar a lista não ordenada no contêiner. Além disso, atribua um id “List-iteem”. Depois disso, adicione texto na forma de uma lista com a ajuda do “
• " marcação. O "
• ”O elemento é usado para representar um item em uma lista:
  
  

  Crie uma lista de assuntos

  
  
  
  
  • Inglês
  
  
  • Ciência da Computação
  
  
  • Matemáticas
  
  
  • Ciência
  
  
  • Estudos Sociais
  
  
  
  

  Saída

  Como fazer a transição altura 0; para altura automática; Usando CSS?

  Para fazer a transição da altura do elemento da altura “0" para "auto”Usando CSS, siga as etapas abaixo.

  Etapa 1: estilo “Div” contêiner e lista de itens

  Acesse o div “aula”Com a ajuda do nome da classe“.menu principal”E listar usando o ID atribuído“#lista de itens”. Em seguida, aplique as propriedades abaixo da listada:

  .Menu-Menu #list-itens
  Max-Hight: 0;
  Transição: Max-Hight 0.12S facilidade;
  estouro: oculto;
  Antecedentes: #C1D7F5;
  estilo de fronteira: duplo;
  margem: 0px 50px;
  

  Aqui:

  • ““altura máxima”É usado para definir a altura máxima de um elemento. Ele impede que o valor utilizado da propriedade de altura aumente sobre a altura máxima. Neste cenário declarado, o valor máximo é definido como “0”.
  • ““transição”No CSS, permite os usuários para alterar os valores de propriedades facilmente para uma duração específica.
  • ““transbordar”É usado para definir o comportamento de um elemento quando o elemento conteúdo transborda. Para fazer isso, o valor desta propriedade é definido como “escondido”.
  • ““fundo”A propriedade é usada para definir a cor na parte traseira do elemento.
  • ““estilo de borda”A propriedade determina o estilo para o limite definido.
  • ““margem”Aloca um espaço fora do limite definido.

  Saída

  Etapa 2: aplique a classe pseudo -pseudo

  Para aplicar o “flutuar”Efeito na lista, primeiro acesse o elemento“ div ”pela classe“ main-div ”ao longo do“:flutuar”Pseudo-classe. Então, especifique o “altura máxima" e "transição”Propriedades para definir o efeito de pairar:

  .Menu Main: Hover #list-itens
  Transição: Max-Hight 0.20S facilidade;
  Max-Hight: 400px;
  

  Por exemplo, o “transição”O valor da propriedade é definido como“Max-Hight 0.20s" e "altura máxima"É definido como"400px”.

  Saída

  Nós ensinamos a você a transição de altura “0" para "auto”Usando CSS.

  Conclusão

  Para fazer a transição da altura “0" para "auto”Ao usar o CSS, primeiro, crie um contêiner“ div ”e adicione uma lista utilizando o“

  ”. Em seguida, especifique o item na lista usando o “
  • " marcação. Em seguida, acesse o item da lista e aplique propriedades CSS “altura máxima" como "0" e "transição" como "0.12s”. Depois disso, utilize o “:flutuar“Pseudo-classe e aplique as propriedades“ Max-Hight ”e“ Transition ”. Este tutorial demonstrou o método de transição da altura de 0 para o automóvel usando CSS.