Html | Semmelbrösel

Während der Nutzung einer Website müssen wir häufig die Navigationsleiste verwenden, die aus Navigationsregisterkarten besteht. Diese Registerkarten der Navigation helfen dem Benutzer, mehrere Abschnitte der Website zu erreichen, indem Sie nur auf sie klicken. Es wird jedoch nicht den gesamten Weg des Abschnitts angezeigt, in dem der Benutzer bei. Zu diesem Zweck die “SemmelbröselWerden in Websites verwendet, da sie nicht nur den Benutzern helfen, sondern auch die Struktur der Website anzeigen, indem sie den gesamten Weg des Abschnitts, in dem sie sich befinden.

In diesem Artikel wird zeigen, wie man Preadcrumbs in HTML erstellt.

Was ist der Unterschied zwischen Navigationsstange und Brotkrumen in HTML?

Die Navigationsleiste wird hauptsächlich ganz oben auf der Website präsentiert. Zum Beispiel sieht eine Navigationsleiste so aus:

Während das Breadcrumb verwendet wird, um die Navigationsleiste zu unterstützen, befindet sich es daher über den Inhalt der Website wie folgt:

Sie haben den Unterschied zwischen der Navigationsstange und den Brotkrumen erkannt. Jetzt zeigt der nächste Abschnitt ein Beispiel für die Erstellung von Brotkrumen in HTML.

So erstellen Sie Preadcrumbs in HTML?

Fügen Sie in HTML zunächst einen mit dem Klassennamen hinzu “Hauptinhalt”. Fügen Sie in diesem DIV -Element ein weiteres Element mit dem Klassennamen hinzu “Semmelbrösel”. Fügen Sie danach eine ungeordnete Liste hinzu

Tag, das mehrere enthält
• Tags Inhalt wie unten im Codeblock gezeigt:
  
  
  
  
  
  • Heim
  
  
  • Kurse
  
  
  • Front-End-Entwicklung
  
  
  • Html
  
  
  
  

  Durch die Bereitstellung des obigen Codes sieht die Ausgabe so aus:

  Wie Sie sehen können, wurde die Struktur der Semmelbrösel erfolgreich erstellt. Wenden Sie nun Stylingeigenschaften auf die HTML -Elemente an.

  Stil alle Elemente

  *
  Rand: 0;
  Polsterung: 0;
  Schriftfamilie: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif;
  

  Die für alle Elemente angewendeten Eigenschaften “*”Von HTML werden unten erklärt:

  • “Rand"Eigenschaft erhält den Wert"0”; Es gibt keinen Platz außerhalb des Elements.
  • “Polsterung"Eigenschaft erhält den Wert"0”; Es erzeugt keinen Raum um den Inhalt des DIV -Elements.
  • “Schriftfamilie”Wird verwendet, um einen Schriftstil auszuwählen.

  Style Maincontent Div

  .Hauptinhalt
  Max-Breite: 800px;
  Rand: 0 Auto;
  Polsterung: 20px;
  

  Die DIV mit dem Namen “Hauptinhalt”Wird mit Eigenschaften angewendet, die nachstehend beschrieben werden:

  • “maximale Breite"Die Eigenschaft gibt an, dass die Breite des Div-Hauptkontents nicht übertreffen darf"800px”.
  • “Rand”Eigenschaft mit dem Wert als"0 Auto”Repräsentiert den 0px -Speicherplatz oben und unten und der gleiche Raum links und rechts vom DIV -Element.
  • “Polsterung"Eigenschaft wird verwendet, um zu generieren"20pxPlatz um den Inhalt des DIV -Elements.

  Stilbrotkrumen UL -Element

  .Breadcrumbs ul
  Rand: 10px;
  Polsterung: 20px;
  Anzeige: Inline-Flex;
  Listenstil: Keine;
  Hintergrundfarbe: RGB (204, 204, 138);
  

  Der obige Code repräsentiert die CSS -Eigenschaften, die auf die angewendet werden

  Element der Div -STEIL. Die Erklärung dieser Eigenschaften wird unten erwähnt:
  • “Rand”Eigenschaft mit dem Wert“10px”Soll 10px Platz außerhalb der geben
    Element.
    • “Polsterung"Eigenschaftssätze"20px”Raum um den Inhalt der
      Element.
      • “Anzeige”Eigenschaft mit dem Wert“Inline-Flex”Macht den Flexbehälter inline.
      • “Listenstil”Eigenschaft mit dem Wert“keiner”Entfernt die Standardstile der
        Element wie Kugeln.
        • “HintergrundfarbeDie Eigenschaft legt die Hintergrundfarbe des Elements fest.

        Stilbrotkrumen Li Elemente

        .Breadcrumbs ul li
        Padding-Links: 10px;
        Padding-Right: 10px;
        Position: Relativ;
        

        Der

      • Das Element innerhalb der Div -STEIL -STECRUMBS werden mit den nachstehend beschriebenen CSS -Eigenschaften angewendet:
        • “Padding-Links”Legt den 10px -Speicherplatz links vom Inhalt fest.
        • “Polsterrechte”Legt den 10px -Speicherplatz rechts vom Inhalt fest.
        • “PositionDie Eigenschaft wird als relativ eingestellt, um das Element relativ an ihre aktuelle Position anzupassen.

        Stilen Sie vor Li ein

        .Breadcrumbs ul.Breadcrumbs-1 li :: vor
        Inhalt: '>';
        Position: absolut;
        Farbe: Blueviolet;
        Schriftgröße: 20px;
        links: -4px;
        Top: -2px;
        

        Der

      • Das Element des Brotcrumbs-1 Div wird mit den nachstehend beschriebenen CSS-Eigenschaften angewendet:
        • “.Breadcrumbs ul.Breadcrumbs-1 li :: vor”: Zuvor ist das Pseudoelement, das sich auf die Styling-Eigenschaften bezieht, vor dem
        • Element der Brotkrumen-1 Div, die im Inneren vorhanden ist
          Element der Semmelbrösel.
          • “InhaltEigenschaften werden vor und nach Pseudoelementen verwendet. Es fügt den ihm vor dem Element zugewiesenen Inhalt ein.
          • “Position”Mit dem als absoluten Positionen festgelegten Wert die
          • Element in Bezug auf ihre Eltern Div.
          • “FarbeEigenschaft wird verwendet, um die Schriftfarbe festzulegen.
          • “Schriftgröße”Passt die Größe der Schrift an 20px an.
          • “links”Eigenschaft mit dem als -4 festgelegten Wert bietet -4px horizontaler Raum.
          • “Spitze”Eigenschaft mit dem Wert, der als -2 festgelegt ist.

          Durch die Bereitstellung des oben genannten Code erhalten wir das folgende Ergebnis:

          Es ist ersichtlich, dass das Umleitungssymbol (>) zu Beginn der angezeigt wird

          Element, das nicht notwendig ist.

          Stil zum Entfernen des ersten Symbols

          .Breadcrumbs ul Li: Erstkind :: vor
          Anzeige: Keine;
          

          “Li: Erstkind"Repräsentiert das erste Kind des Li -Elements und"li: Erstkind :: vor”Zeigt das vor dem erste Li -Element verwendete Symbol an. Während die "Anzeige: KeineDie Eigenschaft entfernt das Symbol vor dem ersten Element.

          Stil html ein Element

          .Breadcrumbs ul li a
          Textdekoration: Keine;
          

          Das in der verwendete Ankeretikett

          • Element wird mit der Eigenschaft angewendet “Textdekoration"Mit dem Wert"keiner”Um den Unterstil zu entfernen.

            Der obige Code zeigt das Ergebnis an, wie unten gezeigt:

            Das ist cool! Die Brotkrumen unserer Website wurden erfolgreich erstellt.

            Sie können auch auch andere Symbole verwenden, indem Sie die Symbol der CSS -Inhaltseigenschaft im obigen Code nur zuweisen:

            Inhalt: '|';

            Der oben genannte Code zeigt das Ergebnis an, wie im Bild gezeigt:

            Das Symbol "Ö”Kann auch in unseren Brotkrumen verwendet werden, indem sie sich bei der CSS -Inhaltseigenschaft anmelden wie:

            Inhalt: 'O';

            Ausgang

            Großartig! Wir haben gelernt, erfolgreich für unsere Website Brotcrumbs für unsere Website zu erstellen.

            Abschluss

            Auf Webseiten sind Brotkrumen für die Zugänglichkeit von Benutzern wichtig. Es hilft nicht nur bei der Navigation, sondern zeigt auch den Benutzern den gesamten Weg zum Abschnitt der Website an, auf dem sie sich befinden. HTML bietet uns mehrere Elemente, um Brotkrumen zu erstellen. Dieser Artikel hat das Verfahren zum Erstellen von Brotkrumen in HTML mit Hilfe eines detaillierten Beispiels gezeigt.