Ak chceme vytvoriť navigačnú lištu v Html, musíme postupovať podľa krokov, ktoré sú uvedené nižšie. Pomocou týchto krokov môžeme ľahko vytvoriť navigačný panel.
Krok 1: Najprv musíme zadať Html kód v ľubovoľnom textovom editore alebo otvoriť existujúci Html súbor v textovom editore, v ktorom chceme vytvoriť navigačnú lištu.
Make a Navigation Bar
Krok 2: Teraz musíme definovať značku v značke, kde chceme vytvoriť lištu.
radenie zo zoznamu polí
You are at JavaTpoint Site.....
Krok 3: Potom musíme definovať
- tag , ktorý sa používa na zobrazenie nezoradeného zoznamu. A potom musíme definovať položky zoznamu v
- tag. Musíme definovať tie položky, ktoré chceme zobraziť v navigačnej lište.
<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: Potom musíme umiestniť kurzor do tesne za zatvorením značky názvu. A potom musíme definovať značku . Krok 4: Potom musíme umiestniť kurzor do tesne za zatvorením značky názvu. A potom musíme definovať značku.
Make a Navigation Bar
Krok 5: Teraz musíme špecifikovať rôzne atribúty id, ktoré sa používajú na nastavenie polohy, farby navigačnej lišty. V značke head teda musíme použiť nasledujúci kód. Môžeme tiež zmeniť hodnotu nehnuteľností podľa našich požiadaviek.
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: Potom musíme značku napísať tesne pred úvodnú značku. A túto značku musíme tiež zavrieť. A nakoniec musíme uložiť súbor Html a potom spustiť súbor v prehliadači.
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..... Vyskúšajte to Výstup vyššie uvedeného Html kódu je zobrazený na nasledujúcej snímke obrazovky:
