Html | Bułka tarta

Korzystając z witryny, często musimy korzystać z paska nawigacyjnego, który składa się z kart nawigacyjnych. Te zakładki nawigacyjne pomagają użytkownikowi osiągnąć kilka sekcji witryny, po prostu klikając. Nie pokazuje jednak całej ścieżki sekcji, w której użytkownik. W tym celu „bułka tarta”Są wykorzystywane na stronach internetowych, ponieważ nie tylko pomagają użytkownikom, ale także wyświetlają strukturę strony internetowej, pokazując całą ścieżkę sekcji, w której są.

W tym artykule pokaże, jak tworzyć bułkę tartą w HTML.

Jaka jest różnica między paskiem nawigacyjnym a bułką tartą w HTML?

Pasek nawigacyjny jest w większości prezentowany na samym szczycie strony internetowej. Na przykład pasek nawigacyjny wygląda tak:

Podczas gdy bułarka jest wykorzystywana do udzielania pomocy dla paska nawigacyjnego, więc jest umieszcza ponad treść witryny w ten sposób:

Uświadomiłeś sobie różnicę między paskiem nawigacyjnym a bułką tartą. Teraz następna sekcja pokaże przykład tworzenia bułki tartej w HTML.

Jak tworzyć bułkę tartą w HTML?

W HTML najpierw dodaj nazwę klasy „główna zawartość". Wewnątrz tego elementu Div dodaj jeszcze jeden element o nazwie klasy „bułka tarta". Następnie dodaj listę nieuporządkowaną

tag, który obejmuje kilka
• Tagi zawartość, jak pokazano poniżej w bloku kodu:
  
  
  
  
  
  • Dom
  
  
  • kursy
  
  
  • Rozwój front-end
  
  
  • Html
  
  
  
  

  Podając powyższy kod, dane wyjściowe będzie wyglądać tak:

  Jak widać, struktura bułki tartej została pomyślnie utworzona. Teraz zastosuj właściwości stylizacji do elementów HTML.

  Styl wszystkie elementy

  *
  Margines: 0;
  Wyściółka: 0;
  Font-Family: „Trebuchet MS”, „Lucida Sans Unicode”, „Lucida Grande”, „Lucida Sans”, Arial, Sans-Serif;
  

  Właściwości zastosowane do wszystkich elementów „*„HTML wyjaśniono poniżej:

  • "margines„Własność ma wartość”0”; Nie da przestrzeni poza elementem.
  • "wyściółka„Własność ma wartość”0”; nie będzie produkować przestrzeni wokół zawartości elementu DIV.
  • "rodzina czcionek”Jest wykorzystywany do wyboru dowolnego stylu czcionki.

  Styl główny div

  .główna zawartość
  maksymalna szerokość: 800px;
  Margines: 0 Auto;
  Wyściółka: 20px;
  

  Div z nazwą „główna zawartość”Jest stosowany z właściwościami opisanymi poniżej:

  • "maksymalna szerokość„Własność określa szerokość głównego kontentu DIV, nie może przekraczać”800px".
  • "margines„Właściwość z ustawioną wartością jako„0 Auto”Reprezentuje przestrzeń 0px na górze i dolnej części oraz równa przestrzeń po lewej i prawej stronie elementu DIV.
  • "wyściółka„Nieruchomość jest wykorzystywana do generowania”20px„Space wokół zawartości elementu DIV.

  Style bułka do bułki. Element

  .Breatcrumbs ul
  Margines: 10px;
  Wyściółka: 20px;
  Wyświetlacz: inline-flex;
  List Style: Brak;
  kolor tła: RGB (204, 204, 138);
  

  Powyższy kod reprezentuje właściwości CSS zastosowane do

  element bułki tartej DIV. Wyjaśnienie tych właściwości zostało wspomniane poniżej:
  • "margines„Własność o wartości”10px”Ma być ustawiony na 10px przestrzeni poza
    element.
    • "wyściółka„Zestawy właściwości”20px”Przestrzeni wokół treści
      element.
      • "wyświetlacz„Własność o wartości”Flex rzędowy”Sprawia, że ​​kontener flex jest w linii.
      • "List w stylu„Własność o wartości”nic”Usuwa domyślne style
        element taki jak pociski.
        • "kolor tła”Właściwość ustawia kolor tła elementu.

        Stylowa bułka do bułki

        .Breatcrumbs ul li
        Padding-Left: 10px;
        PRAWADY: 10px;
        Pozycja: względny;
        

      • Element w obrębie bułki tartej DIV są stosowane z właściwościami CSS, które opisano poniżej:
        • "Padding-Left”Ustawia miejsce 10px po lewej stronie treści.
        • "Prawa wyściółka”Ustawia miejsce 10px po prawej stronie treści.
        • "pozycja„Własność jest ustawiona jako względna w celu dostosowania elementu w stosunku do jego bieżącej pozycji.

        Wstaw styl przed Li

        .Breatcrumbs ul.Breatcrumbs-1 li :: przed
        treść: '>';
        Pozycja: absolutna;
        Kolor: Blueviolet;
        Rozmiar czcionki: 20px;
        po lewej: -4px;
        TOP: -2px;
        

      • Element bułki 1 Div jest stosowany z właściwościami CSS, które opisano poniżej:
        • ".Breatcrumbs ul.Breatcrumbs-1 li :: wcześniej”: Wcześniej jest pseudoelement, który odnosi się do właściwości stylizacji
        • element bułki 1 div, który jest obecny wewnątrz
          element bułki rozbieżnej div.
          • "treść„Nieruchomość jest wykorzystywana z pseudoelementami przed i po. Wstawia przydzieloną do niej zawartość przed elementem.
          • "pozycja”Z wartością ustawioną jako pozycje bezwzględne
          • element w odniesieniu do ich rodzicielskiej div.
          • "kolor„Właściwość jest wykorzystywana do ustawienia koloru czcionki.
          • "rozmiar czcionki”Dostosowuje rozmiar czcionki do 20px.
          • "lewy”Właściwość z zestawem wartości jako -4 zapewnia poziomy przestrzeń -4px.
          • "szczyt„Właściwość z zestawem wartości jako -2 zapewnia przestrzeń -2px od góry.

          Podając wyżej wymieniony kod, otrzymamy następujący wynik:

          Można zauważyć, że symbol przekierowania (>) jest wyświetlany na początku

          element, który nie jest konieczny.

          Styl, aby usunąć pierwszy symbol

          .Breatcrumbs ul li: pierwsza dziecko :: przed
          Nie wyświetla się;
          

          "LI: Pierwszy dziecko”Reprezentuje pierwsze dziecko elementu Li i„Li: Pierwszy dziecko :: przed”Wskazuje ikonę używaną przed pierwszym elementem Li. Natomiast "Nie wyświetla się„Właściwość usuwa symbol przed pierwszym elementem.

          Styl html element

          .Breatcrumbs ul li a
          Dekoracja tekstu: Brak;
          

          Znacznik kotwicy używany w obrębie

          • Element jest stosowany z właściwością „dekoracja tekstu”Z wartością„nic„Aby usunąć styl podkreślenia.

            Powyższy kod wyświetli wynik, jak pokazano poniżej:

            To super! Breat Crumps na naszej stronie internetowej została pomyślnie utworzona.

            Możesz także użyć innych symboli, po prostu przypisując symbol do właściwości treści CSS w powyższym kodzie jako:

            treść: „|”;

            Wyżej wymieniony kod wyświetli wynik, jak pokazano na obrazie:

            Symbol "o”Można również wykorzystać w naszej bułce, logując się do właściwości CSS Content jako:

            treść: „o”;

            Wyjście

            Świetnie! Nauczyliśmy się z powodzeniem tworzyć bułkę tartą dla naszej strony internetowej.

            Wniosek

            Na stronach internetowych bułka tartą jest ważna dla dostępności użytkowników. Nie tylko pomaga w nawigacji, ale także wyświetla użytkowników całej ścieżki do sekcji strony, w której są. HTML zapewnia nam kilka elementów do tworzenia bułki tartej. W tym artykule pokazano procedurę tworzenia bułki tartej w HTML za pomocą szczegółowego przykładu.