Как сделать шапку сайта в html и css

Узнайте, как создать красивую шапку сайта с помощью HTML и CSS: от выбора цвета и отступов до блочной модели и фоновой картинки. Пример и пошаговое руководство.

Создание шапки сайта в HTML и CSS

Создание шапки сайта в HTML и CSS довольно простая задача. Вам понадобится правильно настроить лейаут, структуру и стили.

Настройка лейаута

Для начала необходимо задать ширину и высоту шапки сайта. Для этого можно использовать тег <div>. Например, ширина шапки может быть равна 100%, а высота - 60px:

<div style="width: 100%; height: 60px;">
</div>

Структура шапки

Для дальнейшего создания шапки сайта необходимо использовать теги <header>, <nav>, <ul>, <li>. Например:

<div style="width: 100%; height: 60px;">
  <header>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </header>
</div>

Настройка стилей

Для задания стилей для шапки сайта можно использовать тег <style>. Например, для задания цвета фона можно использовать следующий код:

<style>
  header {
    background-color: #444;
  }
</style>

Для задания цвета текста и ссылок можно использовать следующий код:

<style>
  header {
    background-color: #444;
  }

  header a {
    color: #fff;
  }
</style>

Таким образом, вы можете легко создать шапку сайта в HTML и CSS.