Как сделать навигацию в html css

Создание навигации в HTML и CSS состоит из нескольких шагов:

Определите структуру HTML-кода навигации:

<header>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Услуги</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>

Добавьте стили CSS, чтобы создать визуальный эффект навигации:

/* Стили для навигации */
header {
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
nav li {
  margin: 0 5px;
}
nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
nav a:hover {
  background-color: #fff;
  color: #333;
}

Разберем данные стили. Сначала определим стили для всего навигационного блока header. Определяем его цвет фона, фиксированную позицию (position: fixed;) и т.д.

nav ul определяет список меню со значением none для списка (list-style: none;), а также нулевые значения для отступов и внутреннего заполнения.

nav li задает нулевые пространственные отступы справа и слева (margin: 0 5px;), чтобы создать небольшой отступ между каждым элементом меню.

sav a задает цвет, паддинг, и т.д. Каждая ссылка задана как отдельный блок. Цвет фона и текста меняются на nav a:hover.

Теперь ваша навигация готова! Когда вы нажимаете на каждый элемент ссылки, вы переходите на соответствующую страницу.