Доверьте продвижение нам

Попробуйте надежный хостинг для вашего сайта

Мы рекомендуем своим клиентам! Получите надежность и полное управление вашим сайтом.

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Как сделать хедер в css

Views Icon32

Чтобы создать хедер (верхнюю часть страницы) в CSS, можно использовать следующий код:

HTML:

<header>
  <div class="container">
    <h1>Логотип</h1>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS:

header {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
}
 
.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  font-size: 24px;
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

ul li + li {
  margin-left: 20px;
}

a {
  color: #fff;
  text-decoration: none;
}

Этот код создает хедер, который включает логотип и навигационное меню.

Отметим, что для создания хедера мы использовали элемент <header>, которому присвоили стили CSS. Затем мы создали область контейнера, задав максимальную ширину, выравнивание и отступы. Для логотипа мы задали размер шрифта, а для навигации — список ul с помощью display: flex;, чтобы заставить элементы выравниваться по горизонтали.

Кроме того, мы использовали свойства background-color и color, чтобы задать задний фон и цвет текста. Мы также добавили padding, чтобы создать отступы верхней и нижней части хедера.

Навигационное меню можно оформить различными способами, включая выпадающие меню, анимации и др.

Надеюсь, этот ответ поможет вам создать простой хедер в CSS.

Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.