Якщо ми хочемо створити навігаційну панель у форматі Html, ми повинні виконати кроки, наведені нижче. Використовуючи ці кроки, ми можемо легко створити панель навігації.
c логічний
Крок 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: Після цього ми повинні розташувати курсор відразу після закриття тегу title. А потім ми маємо визначити тег. Крок 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
