Ако искаме да направим лента за навигация в Html, тогава трябва да следваме стъпките, дадени по-долу. Използвайки тези стъпки, можем лесно да създадем лентата за навигация.
отпечатайте звезден модел
Етап 1: Първо, трябва да напишем Html кода във всеки текстов редактор или да отворим съществуващия Html файл в текстовия редактор, в който искаме да направим лента за навигация.
Make a Navigation Bar
Стъпка 2: Сега трябва да дефинираме тага в тага, където искаме да направим лентата.
You are at JavaTpoint Site.....
Стъпка 3: След това трябва да дефинираме
- етикет, който се използва за показване на неподредения списък. И тогава трябва да дефинираме елементите от списъка в
- етикет. Трябва да дефинираме тези елементи, които искаме да покажем в лентата за навигация.
<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: След това трябва да поставим курсора точно след затварящия таг заглавие. И след това трябва да дефинираме етикета. Стъпка 4: След това трябва да поставим курсора точно след затварянето на тага за заглавие. И след това трябва да дефинираме етикета.
Make a Navigation Bar
Стъпка 5: Сега трябва да посочим различни id атрибути, които се използват за задаване на позицията, цвета на лентата за навигация. Така че трябва да използваме следния код в тага head. Можем също така да променим стойността на имотите според нашите изисквания.
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: След това трябва да напишем тага точно преди отварящия таг. И ние също трябва да затворим този етикет. И накрая, трябва да запазим Html файла и след това да стартираме файла в браузъра.
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..... Тествайте сега Резултатът от горния Html код е показан на следната екранна снимка:
функция подниз java
