Html | Brødsmuler

Mens vi bruker et nettsted, må vi ofte bruke navigasjonslinjen, som består av navigasjonsfaner. Disse navigasjonsfanene hjelper brukeren å nå flere deler av nettstedet ved bare å klikke på dem. Imidlertid viser den ikke hele banen til seksjonen der brukeren på. For dette formålet, "brødsmuler”Brukes på nettsteder, da de ikke bare hjelper brukerne, men også viser strukturen på nettstedet ved å vise hele banen til seksjonen der de er på.

Denne artikkelen vil demonstrere hvordan du lager brødsmuler i HTML.

Hva er forskjellen mellom navigasjonsstang og brødsmuler i HTML?

Navigasjonslinjen presenteres for det meste helt øverst på nettstedet. For eksempel ser en navigasjonslinje slik ut:

Mens brødsmulen brukes til å gi hjelp til navigasjonslinjen, så er den plassert over innholdet på nettstedet som dette:

Du har innsett forskjellen mellom navigasjonslinjen og brødsmuler. Nå vil neste avsnitt demonstrere et eksempel på å lage brødsmuler i HTML.

Hvordan lage brødsmuler i HTML?

I HTML, først, legg til et med klassenavnet "hovedinnhold”. Inne i dette DIV -elementet, legg til ett element til med klassenavnet “brødsmuler”. Etter det, legg til en uordnet liste

Tag som inkluderer flere
• Taggerinnhold som vist nedenfor i kodeblokken:
  
  
  
  
  
  • Hjem
  
  
  • kurs
  
  
  • Front-end utvikling
  
  
  • Html
  
  
  
  

  Ved å oppgi koden ovenfor, vil utdataene se slik ut:

  Som du kan se, er strukturen til brødsmulene blitt opprettet. Nå, bruk stylingegenskaper på HTML -elementene.

  Stil alle elementer

  *
  Margin: 0;
  polstring: 0;
  Font-Family: 'Trebuchet MS', 'Lucida sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-serif;
  

  Egenskapene som ble brukt på alle elementene "*”Av HTML er forklart nedenfor:

  • “margin”Eiendom er gitt verdi”0”; det vil ikke gi plass utenfor elementet.
  • “polstring”Eiendom er gitt verdi”0”; Det vil ikke produsere plass rundt innholdet i DIV -elementet.
  • “Font-familie”Brukes til å velge hvilken som helst skriftstil.

  Stil hovedinnhold Div

  .hovedinnhold
  Maks bredde: 800px;
  Margin: 0 Auto;
  polstring: 20px;
  

  Div med navnet “hovedinnhold”Brukes med egenskaper som er beskrevet nedenfor:

  • “Maks bredde”Eiendom spesifiserer bredden på div hovedinnholdet må ikke overstige“800px”.
  • “margin”Eiendom med verdien som“0 Auto”Representerer 0px plass på topp og bunn og lik plass til venstre og høyre for Div -elementet.
  • “polstring”Eiendom brukes til å generere”20px”Plass rundt innholdet i Div -elementet.

  Style Bread Crumbs UL -element

  .brødsmuler ul
  Margin: 10px;
  polstring: 20px;
  Display: Inline-Flex;
  Listestil: Ingen;
  bakgrunnsfarge: RGB (204, 204, 138);
  

  Ovennevnte kode representerer CSS -egenskapene som brukes på

  Element of the Div Bread Crumbs. Forklaringen på disse egenskapene er nevnt nedenfor:
  • “margin”Eiendom med verdien”10px”Er innstilt på å gi 10px med plass utenfor
    element.
    • “polstring”Eiendomssett“20px”Av plass rundt innholdet i
      element.
      • “vise”Eiendom med verdien”inline-flex”Gjør flex -beholderen inline.
      • “Listestil”Eiendom med verdien”ingen”Fjerner standardstilene til
        element som kuler.
        • “bakgrunnsfarge”Eiendom setter elementets bakgrunnsfarge.

        Stil brødsmuler Li -elementer

        .brødsmuler ul li
        Padding-venstre: 10px;
        Padding-høyre: 10px;
        Posisjon: relativ;
        

        De

      • Element i DIV -brødsmuler brukes med CSS -egenskapene som er beskrevet nedenfor:
        • “Padding-venstre”Setter 10px plass til venstre for innholdet.
        • “Padding-høyre”Setter 10px plass til høyre for innholdet.
        • “posisjonEiendommen er satt som relativt for å justere elementet i forhold til dens nåværende posisjon.

        Sett inn stil før Li

        .brødsmuler ul.brødsmuler-1 li :: før
        Innhold: '>';
        Posisjon: Absolutt;
        Farge: Blueviolet;
        Font-størrelse: 20px;
        Venstre: -4px;
        Topp: -2px;
        

        De

      • Elementet i brødsmulene-1 DIV brukes med CSS-egenskapene som er beskrevet nedenfor:
        • “.brødsmuler ul.brødsmuler-1 li :: før”: Før er pseudo-element som refererer til stylingegenskapene som setter inn før
        • elementet i brødsmulene-1 div som er til stede inne i
          elementet i brødsmulene div.
          • “innhold”Eiendom brukes med pseudo-elementer før og etter. Den setter inn innholdet som er tilordnet det før elementet.
          • “posisjon”Med verdien satt som absolutte posisjoner
          • element med hensyn til foreldrenes div.
          • “farge”Eiendom brukes til å stille inn skriftfargen.
          • “skriftstørrelse”Justerer størrelsen på skriften til 20px.
          • “venstre”Eiendom med verdien som -4 gir -4px horisontalt rom.
          • “topp”Eiendom med verdien som -2 gir -2px plass fra toppen.

          Ved å gi den ovennevnte koden, får vi følgende resultat:

          Det kan sees at viderekoblingssymbolet (>) vises ved starten av

          element, som ikke er nødvendig.

          Stil for å fjerne det første symbolet

          .Bread Crumbs Ul Li: First-Child :: før
          Display: Ingen;
          

          “Li: Førstebarn”Representerer det første barnet til Li -elementet, og“Li: First-Child :: Før”Indikerer ikonet som ble brukt før det første LI -elementet. Mens “Display: Ingen”Eiendom fjerner symbolet før det første elementet.

          Stil html et element

          .brødsmuler ul li a
          Tekstdekorasjon: Ingen;
          

          Ankerkoden som brukes i

          • elementet brukes med eiendommen “tekstdekorasjon”Med verdien”ingen”For å fjerne understrekestilen.

            Ovennevnte kode vil vise resultatet som vist nedenfor:

            Det er kult! Brødsmulene på nettstedet vårt er opprettet med hell.

            Du kan også bruke andre symboler også ved å bare tildele symbolet til CSS -innholdsegenskapen i koden ovenfor som:

            Innhold: '|';

            Den ovennevnte koden vil vise resultatet som vist på bildet:

            Symbolet "o”Kan også brukes i våre brødsmuler ved å logge på CSS -innholdsegenskapen som:

            Innhold: 'O';

            Produksjon

            Flott! Vi har lært å lage brødsmuler for nettstedet vårt.

            Konklusjon

            På websider er brødsmuler viktig for brukernes tilgjengelighet. Det hjelper ikke bare til navigasjon, men viser også brukerne hele veien til delen av nettstedet der de er på. HTML gir oss flere elementer for å lage brødsmuler. Denne artikkelen har demonstrert prosedyren for å lage brødsmuler i HTML ved hjelp av et detaljert eksempel.