Html | Migalhas de pão

Ao usar um site, geralmente precisamos usar a barra de navegação, que consiste em guias de navegação. Essas guias de navegação ajudam o usuário a alcançar várias seções do site apenas clicando neles. No entanto, ele não mostra todo o caminho da seção em que o usuário em. Para esse fim, o “Migalhas de pão”São utilizados em sites, pois não apenas ajudam os usuários, mas também exibem a estrutura do site, mostrando todo o caminho da seção em que estão.

Este artigo demonstrará como criar trasladeiras em html.

Qual é a diferença entre barra de navegação e farinha de pão em HTML?

A barra de navegação é apresentada principalmente no topo do site. Por exemplo, uma barra de navegação é assim:

Enquanto a farinha de pão é utilizada para fornecer ajuda à barra de navegação, por isso é colocada acima do conteúdo do site como este:

Você percebeu a diferença entre a barra de navegação e a farinha de rosca. Agora, a próxima seção demonstrará um exemplo de criação de trânsito em html.

Como criar farinha de pão em html?

Em HTML, primeiro, adicione um com o nome da classe “conteúdo principal”. Dentro deste elemento div, adicione mais um elemento com o nome da classe “Migalhas de pão”. Depois disso, adicione uma lista não ordenada

tag que inclui vários
• Tags o conteúdo como mostrado abaixo no bloco de código:
  
  
  
  
  
  • Lar
  
  
  • cursos
  
  
  • Desenvolvimento front-end
  
  
  • Html
  
  
  
  

  Ao fornecer o código acima, a saída será assim:

  Como você pode ver, a estrutura das farinhas foi criada com sucesso. Agora, aplique propriedades de estilo aos elementos HTML.

  Estilo todos os elementos

  *
  margem: 0;
  preenchimento: 0;
  Fonte-família: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif;
  

  As propriedades aplicadas a todos os elementos “*”De HTML são explicados abaixo:

  • ““margem”A propriedade recebe valor“0”; não dará espaço fora do elemento.
  • ““preenchimento”A propriedade recebe valor“0”; não produzirá espaço em torno do conteúdo do elemento div.
  • ““família de fontes”É utilizado para selecionar qualquer estilo de fonte.

  Divis de conteúdo principal do estilo

  .conteúdo principal
  MAX-LIMA: 800PX;
  margem: 0 automático;
  preenchimento: 20px;
  

  O div com o nome “conteúdo principal”É aplicado com propriedades descritas abaixo:

  • ““largura máxima”Propriedade especifica a largura do conteúdo principal da div não deve exceder“800px”.
  • ““margem”Propriedade com o valor definido como“0 Auto”Representa o espaço 0px na parte superior e inferior e espaço igual à esquerda e direita do elemento div.
  • ““preenchimento”A propriedade é utilizada para gerar“20px”Espaço em torno do conteúdo do elemento div.

  Estilo de pão de estilo UL elemento

  .farinha de rosca ul
  margem: 10px;
  preenchimento: 20px;
  Exibição: Inline-Flex;
  estilo de lista: nenhum;
  cor de fundo: RGB (204, 204, 138);
  

  O código acima representa as propriedades CSS aplicadas ao

  elemento da trama de pão da div. A explicação dessas propriedades é mencionada abaixo:
  • ““margem”Propriedade com o valor“10px”Está definido para dar 10px de espaço fora do
    elemento.
    • ““preenchimento”Propriedade conjunta“20px”Do espaço em torno do conteúdo do
      elemento.
      • ““mostrar”Propriedade com o valor“inline-flex”Faz o contêiner flexível embutido.
      • ““estilo de lista”Propriedade com o valor“nenhum”Remove os estilos padrão do
        elemento como balas.
        • ““cor de fundo”Propriedade define a cor de fundo do elemento.

        Exercício de estilo de pão li

        .farinha de rosca ul li
        preenchimento-esquerda: 10px;
        Right-right: 10px;
        Posição: relativa;
        

        O

      • O elemento dentro das farinhas de pão da Div são aplicadas com as propriedades CSS descritas abaixo:
        • ““preenchimento-esquerda”Define 10px espaço à esquerda do conteúdo.
        • ““Right-right”Define o espaço de 10px à direita do conteúdo.
        • ““posição”A propriedade é definida como relativa para ajustar o elemento em relação à sua posição atual.

        Inserir estilo antes de li

        .farinha de pão ul.Caramba
        Conteúdo: '>';
        Posição: Absoluto;
        Cor: Blueviolet;
        Size da fonte: 20px;
        Esquerda: -4px;
        topo: -2px;
        

        O

      • O elemento da troca de rosca-1 é aplicado com as propriedades CSS que são descritas abaixo:
        • ““.farinha de pão ul.Caramba”: Antes é o elemento pseudo-elemento que se refere às propriedades de estilo inserir antes do
        • elemento da trama de pão-1 div, que está presente dentro do
          Elemento da migalha de pão div.
          • ““contente”A propriedade é utilizada com pseudo-elementos antes e depois. Ele insere o conteúdo atribuído a ele antes do elemento.
          • ““posição”Com o valor definido como posições absolutas, o
          • Elemento em relação à divisão dos pais.
          • ““cor”A propriedade é utilizada para definir a cor da fonte.
          • ““tamanho da fonte”Ajusta o tamanho da fonte para 20px.
          • ““esquerda”Propriedade com o valor definido como -4 fornece um espaço horizontal -4px.
          • ““principal”Propriedade com o valor definido como -2 fornece espaço de -2px a partir do topo.

          Ao fornecer o código acima mencionado, obteremos o seguinte resultado:

          Pode -se observar que o símbolo de redirecionamento (>) é exibido no início do

          elemento, que não é necessário.

          Estilo para remover o primeiro símbolo

          .Breadcrumbs Ul Li: Primeiro filho :: antes
          Mostrar nenhum;
          

          ““Li: Primeiro filho”Representa o primeiro filho do elemento LI e“Li: Primeiro filho :: antes”Indica o ícone usado antes do primeiro elemento LI. Considerando que a "Mostrar nenhum”A propriedade remove o símbolo antes do primeiro elemento.

          Estilo html um elemento

          .farinha de pão ul li a
          Decoração de texto: Nenhum;
          

          A etiqueta de ancoragem usada dentro do

          • O elemento é aplicado com a propriedade “decoração de texto"Com o valor"nenhum”Para remover o estilo sublinhado.

            O código acima exibirá o resultado como mostrado abaixo:

            Isso é legal! As migalhas de pão do nosso site foram criadas com sucesso.

            Você também pode usar outros símbolos também atribuindo o símbolo à propriedade de conteúdo CSS no código acima como:

            Conteúdo: '|';

            O código acima mencionado exibirá o resultado como mostrado na imagem:

            O símbolo "o”Também pode ser utilizado em nossas migalhas de pão, fazendo login na propriedade de conteúdo CSS como:

            Conteúdo: 'O';

            Saída

            Ótimo! Aprendemos a criar trilhas de pão para o nosso site com sucesso.

            Conclusão

            Nas páginas da web, as farinhas de pão são importantes para a acessibilidade dos usuários. Ele não apenas ajuda na navegação, mas também exibe os usuários todo o caminho para a seção do site onde eles estão. HTML nos fornece vários elementos para criar trilhas de pão. Este artigo demonstrou o procedimento para criar trilhas de pão em HTML com a ajuda de um exemplo detalhado.