Html | Migas de pan

Al usar un sitio web, a menudo necesitamos usar la barra de navegación, que consiste en pestañas de navegación. Estas pestañas de navegación ayudan al usuario a llegar a varias secciones del sitio web simplemente haciendo clic en ellas. Sin embargo, no muestra la ruta completa de la sección donde el usuario en. Para este propósito, el "migas de pan"Se utilizan en sitios web, ya que no solo ayudan a los usuarios, sino que también muestran la estructura del sitio web mostrando todo el camino de la sección donde están en.

Este artículo demostrará cómo crear migas de pan en HTML.

¿Cuál es la diferencia entre la barra de navegación y las migas de pan en HTML??

La barra de navegación se presenta principalmente en la parte superior del sitio web. Por ejemplo, una barra de navegación se ve así:

Mientras que el panrumb se utiliza para proporcionar ayuda a la barra de navegación, por lo que se coloca por encima del contenido del sitio web como este:

Te has dado cuenta de la diferencia entre la barra de navegación y las migas de pan. Ahora, la siguiente sección demostrará un ejemplo de creación de migas de pan en HTML.

Cómo crear migas de pan en HTML?

En html, primero, agregue un nombre de clase "contenido principal". Dentro de este elemento div, agregue un elemento más que tenga el nombre de la clase "migas de pan". Después de eso, agregue una lista desordenada

etiqueta que incluye varios
• Contenido de las etiquetas como se muestra a continuación en el bloque de código:
  
  
  
  
  
  • Hogar
  
  
  • cursos
  
  
  • Desarrollo frontal
  
  
  • Html
  
  
  
  

  Al proporcionar el código anterior, la salida se verá así:

  Como puede ver, la estructura de las migas de pan se ha creado con éxito. Ahora, aplique propiedades de estilo a los elementos HTML.

  Estilo todos los elementos

  *
  margen: 0;
  relleno: 0;
  Font-Family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif;
  

  Las propiedades aplicadas a todos los elementos "*"De HTML se explican a continuación:

  • "margen"La propiedad tiene valor"0"; No dará espacio fuera del elemento.
  • "relleno"La propiedad tiene valor"0"; No producirá espacio alrededor del contenido del elemento div.
  • "Familia tipográfica"Se utiliza para seleccionar cualquier estilo de fuente.

  Estilo principal Div-Content Div

  .contenido principal
  anchura máxima: 800px;
  margen: 0 auto;
  relleno: 20px;
  

  El div con el nombre "contenido principal"Se aplica con propiedades que se describen a continuación:

  • "anchura máxima"La propiedad especifica el ancho del contenido principal Div no debe exceder"800px".
  • "margen"Propiedad con el valor establecido como"0 Auto"Representa el espacio 0px en la parte superior e inferior y el espacio igual a la izquierda y a la derecha del elemento Div.
  • "relleno"La propiedad se utiliza para generar"20px"Espacio alrededor del contenido del elemento Div.

  Estilo de pan rallado de pan

  .pan rallado ul
  margen: 10px;
  relleno: 20px;
  Pantalla: en línea-flex;
  Estilo de lista: Ninguno;
  Color de fondo: RGB (204, 204, 138);
  

  El código anterior representa las propiedades CSS aplicadas al

  Elemento de las migas de pan de Div. La explicación de estas propiedades se menciona a continuación:
  • "margen"Propiedad con el valor"10px"Está listo para dar 10 px de espacio fuera del
    elemento.
    • "relleno"Conjuntos de propiedades"20px"De espacio alrededor del contenido del
      elemento.
      • "mostrar"Propiedad con el valor"en línea"Hace que el contenedor flexible esté en línea.
      • "estilo de lista"Propiedad con el valor"ninguno"Elimina los estilos predeterminados del
        elemento como balas.
        • "color de fondo"La propiedad establece el color de fondo del elemento.

        Elementos de estilo de pan de pan de estilo

        .pan rallado ul li
        ROLDE-LEFT: 10px;
        Right de relleno: 10px;
        Posición: relativo;
        

        El

      • El elemento dentro de las migas de pan Div se aplican con las propiedades CSS que se describen a continuación:
        • "pesadilla"Establece un espacio 10px a la izquierda del contenido.
        • "derrota"Establece un espacio 10px a la derecha del contenido.
        • "posiciónLa propiedad se establece como relativa para ajustar el elemento en relación con su posición actual.

        Insertar estilo antes de Li

        .pan rallado.BreadRumbs-1 li :: antes
        contenido: '>';
        Posición: Absoluto;
        Color: Blueviolet;
        tamaño de fuente: 20px;
        Izquierda: -4px;
        arriba: -2px;
        

        El

      • El elemento del Div BreadRumbs-1 se aplica con las propiedades CSS que se describen a continuación:
        • ".pan rallado.Breadrumbs-1 li :: antes": Antes es el pseudo-elemento que se refiere al inserto de propiedades de estilo antes del
        • Elemento de las migas de pan de pan-1 divs que está presente dentro del
          Elemento de las migas de pan.
          • "contenidoLa propiedad se utiliza con pseudo-elementos antes y después. Inserta el contenido asignado antes del elemento.
          • "posición"Con el valor establecido como posiciones absolutas el
          • elemento con respecto a sus padres Div.
          • "colorLa propiedad se utiliza para establecer el color de la fuente.
          • "tamaño de fuente"Ajusta el tamaño de la fuente a 20px.
          • "izquierda"Propiedad con el valor establecido como -4 proporciona un espacio horizontal -4px.
          • "arriba"Propiedad con el valor establecido como -2 proporciona un espacio -2px desde la parte superior.

          Al proporcionar el código mencionado anteriormente, obtendremos el siguiente resultado:

          Se puede ver que el símbolo de redirección (>) se muestra al comienzo del

          elemento, que no es necesario.

          Estilo para eliminar el primer símbolo

          .pan rallado ul li: primer hijo :: antes
          Pantalla: ninguno;
          

          "Li: Primer hijo"Representa al primer hijo del elemento LI, y"Li: Primer hijo :: antes"Indica el icono utilizado antes del primer elemento LI. Mientras que el "Pantalla: ninguno"La propiedad elimina el símbolo antes del primer elemento.

          Estilo html un elemento

          .pan rallado ul li a
          Decoración de texto: ninguna;
          

          La etiqueta de anclaje utilizada dentro del

          • El elemento se aplica con la propiedad "decoración de texto"Con el valor"ninguno"Para eliminar el estilo subrayado.

            El código anterior mostrará el resultado como se muestra a continuación:

            Eso es genial! Los paneles de pan de nuestro sitio web se han creado con éxito.

            También puede usar otros símbolos también asignando el símbolo a la propiedad de contenido CSS en el código anterior como:

            Contenido: '|';

            El código mencionado anteriormente mostrará el resultado como se muestra en la imagen:

            El símbolo "O"También se puede utilizar en nuestras migas de pan al registrarse en la propiedad de contenido CSS como:

            Contenido: 'O';

            Producción

            Excelente! Hemos aprendido a crear migas de pan para nuestro sitio web con éxito.

            Conclusión

            En las páginas web, las migas de pan son importantes para la accesibilidad de los usuarios. No solo ayuda en la navegación, sino que también muestra a los usuarios toda la ruta a la sección del sitio donde están en. HTML nos proporciona varios elementos para crear migas de pan. Este artículo ha demostrado el procedimiento para crear migas de pan en HTML con la ayuda de un ejemplo detallado.