Jei norime sukurti naršymo juostą HTML, turime atlikti toliau nurodytus veiksmus. Atlikdami šiuos veiksmus, galime lengvai sukurti naršymo juostą.
1 žingsnis: Pirmiausia turime įvesti HTML kodą bet kuriame teksto rengyklėje arba atidaryti esamą HTML failą teksto rengyklėje, kurioje norime sukurti naršymo juostą.
Make a Navigation Bar
2 žingsnis: Dabar turime apibrėžti žymą žymoje, kurioje norime sukurti juostą.
You are at JavaTpoint Site.....
3 veiksmas: Po to turime apibrėžti
- žyma , kuri naudojama netvarkingam sąrašui rodyti. Ir tada turime apibrėžti sąrašo elementus
- žyma. Turime apibrėžti tuos elementus, kuriuos norime rodyti naršymo juostoje.
<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.....
4 veiksmas: Po to žymeklį turime uždėti iškart po pavadinimo žymos uždarymo. Tada turime apibrėžti žymą . 4 veiksmas: po to žymeklį turime uždėti iškart po pavadinimo žymos uždarymo. Ir tada mes turime apibrėžti žymą.
Make a Navigation Bar
5 veiksmas: Dabar turime nurodyti skirtingus ID atributus, kurie naudojami naršymo juostos vietai, spalvai nustatyti. Taigi, galvos žymoje turime naudoti šį kodą. Taip pat galime keisti nekilnojamojo turto vertę pagal savo poreikius.
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; } 6 veiksmas: Po to turime įvesti žymą prieš pat pradinę žymą. Taip pat turime uždaryti šią žymą. Ir galiausiai turime išsaugoti HTML failą ir paleisti jį naršyklėje .
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..... Išbandykite dabar Aukščiau pateikto HTML kodo išvestis rodoma šioje ekrano kopijoje:
