Ja mēs vēlamies izveidot navigācijas joslu HTML, mums ir jāveic tālāk norādītās darbības. Izmantojot šīs darbības, mēs varam viegli izveidot navigācijas joslu.
1. darbība: Pirmkārt, mums ir jāievada HTML kods jebkurā teksta redaktorā vai jāatver esošais HTML fails teksta redaktorā, kurā vēlamies izveidot navigācijas joslu.
Make a Navigation Bar
2. darbība: Tagad mums ir jādefinē tags tagā, kurā mēs vēlamies izveidot joslu.
You are at JavaTpoint Site.....
3. darbība: Pēc tam mums ir jādefinē
- tags , ko izmanto, lai parādītu nesakārtoto sarakstu. Un tad mums ir jādefinē saraksta vienumi
- tagu. Mums ir jādefinē tie vienumi, kurus vēlamies parādīt navigācijas joslā.
<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. darbība: Pēc tam mums ir jānovieto kursors tieši pēc nosaukuma taga aizvēršanas. Un tad mums ir jādefinē tags . 4. darbība: pēc tam mums ir jānovieto kursors tieši pēc nosaukuma taga aizvēršanas. Un tad mums ir jādefinē tags.
Make a Navigation Bar
5. darbība: Tagad mums ir jānorāda dažādi id atribūti, kas tiek izmantoti, lai iestatītu navigācijas joslas pozīciju, krāsu. Tātad head tagā mums ir jāizmanto šāds kods. Mēs varam arī mainīt īpašumu vērtību atbilstoši mūsu prasībām.
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. darbība: Pēc tam mums ir jāievada tags tieši pirms sākuma taga. Un mums ir arī jāaizver šī atzīme. Un, visbeidzot, mums ir jāsaglabā HTML fails un pēc tam jāpalaiž fails pārlūkprogrammā.
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..... Izmēģiniet to tagad Iepriekš minētā HTML koda izvade ir parādīta šajā ekrānuzņēmumā:
