Html | Briciole di pane

Durante l'utilizzo di un sito Web, spesso dobbiamo utilizzare la barra di navigazione, che consiste nelle schede di navigazione. Queste schede di navigazione aiutano l'utente a raggiungere diverse sezioni del sito Web semplicemente facendole clic su di loro. Tuttavia, non mostra l'intero percorso della sezione in cui l'utente a. A tale scopo, il "briciole di pane"Sono utilizzati nei siti Web in quanto non solo aiutano gli utenti, ma mostrano anche la struttura del sito Web mostrando l'intero percorso della sezione in cui si trovano.

Questo articolo dimostrerà come creare pangrattato in html.

Qual è la differenza tra barra di navigazione e pangrattato in HTML?

La barra di navigazione è principalmente presentata in cima al sito Web. Ad esempio, una barra di navigazione sembra questo:

Mentre il panebrumb viene utilizzato per fornire aiuti alla barra di navigazione, quindi è posizionato al di sopra del contenuto del sito Web in questo modo:

Hai realizzato la differenza tra la barra di navigazione e il pangrattato. Ora, la prossima sezione dimostrerà un esempio di creazione di pangrattato in HTML.

Come creare pangrattato in html?

In HTML, prima, aggiungi un nome di classe "contenuto principale". All'interno di questo elemento Div, aggiungi un altro elemento con il nome di classe "briciole di pane". Successivamente, aggiungi un elenco non ordinato

tag che include diversi
• Tags contenuto come mostrato di seguito nel blocco del codice:
  
  
  
  
  
  • Casa
  
  
  • corsi
  
  
  • Sviluppo front-end
  
  
  • Html
  
  
  
  

  Fornendo il codice sopra, l'output sembrerà così:

  Come puoi vedere, la struttura del pangrattato è stata creata con successo. Ora, applica le proprietà di stile agli elementi HTML.

  Stile tutti gli elementi

  *
  Margine: 0;
  imbottitura: 0;
  Font-Family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, Sans-Serif;
  

  Le proprietà applicate a tutti gli elementi "*"Di HTML sono spiegati di seguito:

  • "margine"Proprietà viene dato valore"0"; non darà spazio fuori dall'elemento.
  • "imbottitura"Proprietà viene dato valore"0"; Non produrrà spazio attorno al contenuto dell'elemento div.
  • "famiglia di font"Viene utilizzato per selezionare qualsiasi stile di carattere.

  STANI DIV-Content Main-Content

  .contenuto principale
  Licromra massima: 800px;
  Margine: 0 Auto;
  imbottitura: 20px;
  

  Il div con il nome "contenuto principale"Viene applicato con le proprietà descritte di seguito:

  • "larghezza massima"La proprietà specifica la larghezza del contenuto principale Div non deve superare"800px".
  • "margine"Proprietà con il valore impostato come"0 Auto"Rappresenta lo spazio 0px nella parte superiore e inferiore e uguale a sinistra e a destra dell'elemento Div.
  • "imbottitura"La proprietà viene utilizzata per generare"20px"Spazio attorno al contenuto dell'elemento Div.

  Stile Breadcrumbs Ul Element

  .panecrumbs ul
  Margine: 10px;
  imbottitura: 20px;
  display: inline-flex;
  stile elenco: nessuno;
  Background-color: RGB (204, 204, 138);
  

  Il codice sopra rappresenta le proprietà CSS applicate a

  Elemento del Breadcrumbs Div. La spiegazione di queste proprietà è menzionata di seguito:
  • "margine"Proprietà con il valore"10px"È impostato per dare 10px di spazio al di fuori del
    elemento.
    • "imbottitura"Set di proprietà"20px"Di spazio attorno al contenuto del
      elemento.
      • "Schermo"Proprietà con il valore"inline-flex"Rende in linea il contenitore flessibile.
      • "stile elenco"Proprietà con il valore"nessuno"Rimuove gli stili predefiniti del
        elemento come proiettili.
        • "colore di sfondo"La proprietà imposta il colore di sfondo dell'elemento.

        Stile Breadcrumbs Li Elements

        .panecrumbs ul li
        imbottitura-sinistra: 10px;
        imbottitura-destra: 10px;
        Posizione: relativo;
        

        IL

      • L'elemento all'interno del pangrattato di div viene applicato con le proprietà CSS descritte di seguito:
        • "imbottitura-sinistra"Imposta lo spazio 10px a sinistra del contenuto.
        • "imbottitura-destra"Imposta lo spazio 10px a destra del contenuto.
        • "posizione"La proprietà è impostata come relativa per regolare l'elemento rispetto alla sua posizione corrente.

        Inserire lo stile prima di Li

        .Breadcrumbs Ul.panecrumbs-1 li :: prima
        contenuto: '>';
        Posizione: assoluto;
        Colore: blueviolet;
        Font-size: 20px;
        A sinistra: -4px;
        Top: -2px;
        

        IL

      • L'elemento del Breadcrumbs-1 Div viene applicato con le proprietà CSS descritte di seguito:
        • ".Breadcrumbs Ul.panecrumbs-1 li :: prima": Prima è lo pseudo-elemento che si riferisce all'inserto delle proprietà di styling prima del
        • Elemento del pangrattato di Breadcrumbs-1 che è presente all'interno del
          Elemento del pangrattato div.
          • "contenuto"La proprietà viene utilizzata con pseudo-elementi prima e dopo. Inserisce il contenuto assegnato prima dell'elemento.
          • "posizione"Con il valore impostato come assoluto posiziona il
          • Elemento rispetto al loro genitore div.
          • "colore"La proprietà viene utilizzata per impostare il colore del carattere.
          • "dimensione del font"Regola la dimensione del carattere su 20px.
          • "Sinistra"Proprietà con il valore impostato come -4 fornisce spazio orizzontale.
          • "superiore"Proprietà con il valore impostato come -2 fornisce spazio -2px dall'alto.

          Fornendo il codice sopra menzionato, otterremo il seguente risultato:

          Si può vedere che il simbolo di reindirizzamento (>) viene visualizzato all'inizio del

          elemento, che non è necessario.

          Stile per rimuovere il primo simbolo

          .Breadcrumbs Ul Li: First-Child :: prima
          visualizzazione: nessuno;
          

          "Li: Primo figlio"Rappresenta il primo figlio dell'elemento Li e"Li: First-Child :: prima"Indica l'icona utilizzata prima del primo elemento LI. Mentre il "Display: nessuno"La proprietà rimuove il simbolo prima del primo elemento.

          Stile html un elemento

          .panecrumbs ul li a
          DECORAZIONE DEL TESTO: Nessuno;
          

          Il tag di ancoraggio usato all'interno del

          • L'elemento viene applicato con la proprietà "decorazione del testo"Con il valore"nessuno"Per rimuovere lo stile sottolineato.

            Il codice sopra visualizzerà il risultato come mostrato di seguito:

            Questo è figo! I pangrattato del nostro sito Web sono stati creati con successo.

            Puoi anche usare altri simboli anche semplicemente assegnando il simbolo alla proprietà del contenuto CSS nel codice sopra come:

            Contenuto: '|';

            Il codice sopra menzionato visualizzerà il risultato come mostrato nell'immagine:

            Il simbolo "o"Può anche essere utilizzato nei nostri pangrattato accedendo alla proprietà del contenuto CSS come:

            Contenuto: 'O';

            Produzione

            Grande! Abbiamo imparato a creare pangrattato per il nostro sito Web con successo.

            Conclusione

            Nelle pagine Web, il pangrattato è importante per l'accessibilità degli utenti. Non solo aiuta nella navigazione, ma visualizza anche gli utenti l'intero percorso verso la sezione del sito in cui si trovano. HTML ci fornisce diversi elementi per creare pangrattato. Questo articolo ha dimostrato la procedura per creare pangrattato in HTML con l'aiuto di un esempio dettagliato.