Jak zrobić pasek nawigacyjny w HTML?

W nowoczesnym obliczeniach strona internetowa może zawierać linki, które przekierowują na kilka innych stron. Zwykle linki te są umieszczane w określonej pozycji na stronie internetowej. Konkretny utwór, który zawiera te linki, jest znany jako pasek nawigacyjny.

Pasek nawigacyjny jest głównym elementem każdej strony internetowej/strony internetowej. Pasek nawigacyjny może znajdować się w kierunku poziomym lub pionowym. Mając uwagę na znaczenie pasków nawigacyjnych, ten post przedstawia kilka metod utworzenia paska nawigacyjnego w HTML. Możliwe wyniki tego bloga to:

• Jak utworzyć poziomy pasek nawigacji w HTML?
• Jak utworzyć pionowy pasek nawigacyjny w HTML?

Metoda 1: Jak utworzyć poziomy pasek nawigacji w HTML?

Dokument HTML to połączenie setek tagów. Każdy znacznik odnosi się do pewnej konkretnej funkcjonalności. Ponadto możesz połączyć wiele elementów, aby stworzyć niestandardowy projekt. Za pomocą pomocy można stworzyć pasek nawigacyjny

I
• tagi. Ta sekcja zawiera szczegółowy przewodnik, aby utworzyć poziome słupki w HTML.

  Kod HTML do utworzenia poziomego paska nawigacji jest wyświetlana poniżej.

  Html

  
  
  
  
  
  
  
  
  
  
  
  • Dom
  
  
  • O nas
  
  
  • Skontaktuj się z nami
  
  
  • Galeria
  
  
  
  
  
  

  W tym kodzie:

  • Stworzyliśmy .
  • Wewnątrz lista jest tworzona za pomocą
    etykietka.
    • Aby dodać elementy
      tag, wstawiliśmy elementy listy za pomocą
      • etykietka.
      • Wreszcie, wewnątrz znacznika wstawiamy linki do innych stron HTML za pomocą znacznika.

      Aby uzyskać lepszą prezentację, na HTML stosuje się następujący kod CSS.

      CSS

      ul
      
      List Style: Brak;
      
      li a
      
      Dekoracja tekstu: Brak;
      Blok wyświetlacza;
      float: lewy;
      Wyściółka: 10px 15px;
      Rozmiar czcionki: 20px;
      kolor tła: światła;
      czarny kolor;
      Font-Family: Georgia, „Times New Roman”, Times, Serif;
      
      Li A: Wover
      
      kolor tła: światła światła;
      kolor biały;
      

      W powyższym kodzie:

      • Właściwość stylizacji listy nie jest ustawiona.
      • Ponadto różne właściwości CSS, w tym (dekoracja tekstu, wyświetlacz, pływak itp.) są stosowane na pozycjach listy.
      • Efekt zawisowy jest również dodawany do
      • etykietka.

      Wyjście

      Wyjście pokazuje, że pomyślnie utworzyliśmy poziomy pasek nawigacyjny za pomocą HTML i CSS.

      Metoda 2: Jak utworzyć pionowy pasek nawigacyjny w HTML?

      Główne składniki (

      ,
      • ) są takie same dla pionowych i poziomych słupków. Dlatego pionowy pasek jest łatwy do stworzenia. W tym przykładzie skorzystaliśmy z następującego kodu, aby utworzyć pasek nawigacyjny w HTML:

        Html

        
        
        
        
        
        
        
        
        
        
        • Dom
        
        
        • O nas
        
        
        • Skontaktuj się z nami
        
        
        • Galeria
        
        
        
        
        

        W tym kodzie:

        • Utworzyliśmy listę za pomocą
          etykietka.
          • W środku
            tag, wstawiliśmy elementy listy za pomocą
            • etykietka.
            • Następnie wstawiliśmy linki do innych stron HTML za pomocą znacznika.

            Aby uzyskać lepszą estetykę paska nawigacyjnego, użyliśmy następującego kodu CSS i umieściliśmy w zewnętrznym pliku CSS:

            CSS

            ul
            
            List Style: Brak;
            
            li a
            
            Dekoracja tekstu: Brak;
            Blok wyświetlacza;
            szerokość: 180px;
            Wyściółka: 10px 15px;
            Rozmiar czcionki: 20px;
            kolor tła: światła;
            czarny kolor;
            Font-Family: Georgia, „Times New Roman”, Times, Serif;
            
            Li A: Wover
            
            kolor tła: światła światła;
            kolor biały;
            

            W powyższym kodzie CSS:

            • Stylizacja listy nie ma żadnego.
            • Kilka stylów jest stosowanych na pozycjach listy.
            • Wreszcie, efekt zawisowy jest również stosowany na pozycjach listy.

            Wyjście
            

            Dane wyjściowe pokazuje, że pomyślnie utworzyliśmy pionowy pasek nawigacji.

            Proszę bardzo! Nauczyłeś się tworzyć poziomy i pionowy pasek nawigacyjny w HTML.

            Wniosek

            W HTML możemy stworzyć pasek nawigacyjny, tworząc prostą listę za pomocą

            ,
            • i tagi. Pasek nawigacyjny może być pionowy lub pozioma. Ponadto możesz dodać do niego różne style, stosując CSS. Ten post wykazał metody tworzenia pasków nawigacyjnych w HTML. Za pomocą paska nawigacyjnego można przejść do różnych stron strony internetowej.