Jak można użyć Flexbox do utworzenia paska nawigacyjnego?

Flexbox jest najlepszym wyborem do stworzenia paska nawigacyjnego, szczególnie jeśli chodzi o reakcję. FlexBox ułatwia elementy do wyrównania w pojemniku, zapewnia odstęp. Ze względu na kompatybilność przeglądarki, styl pozostaje taki sam w wielu wersjach przeglądarek.

W tym artykule pokazano, jak utworzyć pasek nawigacyjny za pomocą układu FlexBox, który obejmuje:

• Struktura paska nawigacyjnego
• Stylizacja Navbar i Logo
• Stylizacja elementów menu
• Stylizacja przycisku i przycisku wyszukiwania

Jak można użyć Flexbox do utworzenia paska nawigacyjnego?

Pasek nawigacyjny pozwala użytkownikowi przejść przez wiele stron internetowych na stronie internetowej. Zawiera pasek wyszukiwania, ikony społeczne i wiele innych. Wykonaj poniższe szczegółowe kroki, aby utworzyć pasek nawigacyjny za pomocą układu FlexBox:

Krok 1: Struktura paska nawigacyjnego

Pierwszym krokiem jest utworzenie struktury paska nawigacyjnego za pomocą HTML. Na przykład Navbar zawiera „Logo ”,„ Elementy menu ”i„ pasek wyszukiwania”Z przesłaniem„przycisk”:

Wyjaśnienie powyższego kodu jest następujące:

• Najpierw stwórz „
• Trzymać „logo„Firma/strony internetowej, utwórz„„Oznacz i przypisz go klasa„Logos". Później ta klasa jest wykorzystywana do dodawania stylizacji do logo.
• Następnie użyj listy nieopisanej „
  „Tag do utworzenia„menu" guziki. I dodaj kilka elementów listy za pomocą „
  • ”Tagi. Przypisz także klasę o nazwie „pozycja w menu”Do każdego„
  • ”Tag.
  • W końcu stwórz „wejście„Pole o typu„tekst”I użyj„przycisk„To jest owinięte w„„Tag klasy”szukaj".

  Po wykonaniu powyższego kodu strona internetowa pojawia się w ten sposób:

  Dane wyjściowe pokazuje, że struktura BARBAR została wyświetlona na ekranie.

  Krok 2: Stylizacja Navbar i Logo

  Najpierw wybierz „Nav„Selektor elementów, który wybiera„