Jeśli chcemy utworzyć pasek nawigacyjny w HTML, musimy wykonać kroki podane poniżej. Wykonując te kroki, możemy łatwo utworzyć pasek nawigacji.
Krok 1: Na początek musimy wpisać kod HTML w dowolnym edytorze tekstu lub otworzyć w edytorze tekstu istniejący plik HTML, w którym chcemy utworzyć pasek nawigacji.
Make a Navigation Bar
Krok 2: Teraz musimy zdefiniować tag w tagu, w którym chcemy utworzyć pasek.
zestaw narzędzi wiosennych
You are at JavaTpoint Site.....
Krok 3: Następnie musimy zdefiniować
- tag , który służy do wyświetlania listy nieuporządkowanej. Następnie musimy zdefiniować elementy listy w pliku
- etykietka. Musimy zdefiniować te elementy, które chcemy pokazać na pasku nawigacyjnym.
<ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....
Krok 4: Następnie musimy umieścić kursor tuż po zamknięciu tagu tytułu. Następnie musimy zdefiniować tag. Krok 4: Następnie musimy umieścić kursor tuż po zamknięciu tagu tytułowego. Następnie musimy zdefiniować tag.
Make a Navigation Bar
Krok 5: Teraz musimy określić różne atrybuty id, które służą do ustawienia pozycji i koloru paska nawigacyjnego. Musimy więc użyć następującego kodu w tagu head. Możemy również zmienić wartość nieruchomości według naszych wymagań.
body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } Krok 6: Następnie musimy wpisać tag tuż przed tagiem otwierającym. Musimy także zamknąć ten tag. I na koniec musimy zapisać plik HTML, a następnie uruchomić plik w przeglądarce.
Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... Przetestuj teraz Dane wyjściowe powyższego kodu HTML pokazano na poniższym zrzucie ekranu:
