Как сделать шапку в html css
Перейти к содержимому

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

  • автор:

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

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

Время чтения: 6 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Алёна Батицкая ,
  • Светлана Коробцева ,
  • Артём Гвозденков

Обновлено 12 февраля 2024

Кратко

Скопировать ссылку «Кратко» Скопировано

— это семантичный элемент, который нужен для отделения вводного содержимого или навигации от основного содержимого целой страници или секционного блока. Например, «шапка» с навигацией для всего сайта или имя автора и дата публикации в превью статьи или новости.

Пример

Скопировать ссылку «Пример» Скопировано

Пример поста в блоге:

    

Мой самый первый блог пост

3 дня назад

Сегодня я начал изучать вёрстку. Это очень увлекательно.

Все комментарии
article> header> h2>Мой самый первый блог постh2> p>3 дня назадp> header> p>Сегодня я начал изучать вёрстку. Это очень увлекательно.p> footer> a href="?comments=1">Все комментарииa> footer> article>

Вот как можно использовать на странице портфолио. Он может находиться в любом месте секционного содержимого и отделять сопутствующее описание от основного контента:

     src="logo.svg" width="200" height="120" alt="Портфолио дизайнера Ольги" >  Мои работы Мои навыки Контакты     

Портфолио Ольги Сасквоч

Добро пожаловать!

Рада приветствовать вас на своём сайте…

Работа номер 1

Тут описываем какой мы сделали замечательный проект, причём в одиночку. Все эти бессонные ночи наедине с монитором и клавиатурой. Авторы: Ольга Сасквоч
header> img src="logo.svg" width="200" height="120" alt="Портфолио дизайнера Ольги" > nav> a href="#">Мои работыa> a href="#">Мои навыкиa> a href="#">Контактыa> nav> header> main> h1>Портфолио Ольги Сасквочh1> p>Добро пожаловать!p> p>Рада приветствовать вас на своём сайте…p> ul class="portfolio-articles"> li> article class="card-article"> h2 class="card-article__title">Работа номер 1h2> div class="portfolio-work portfolio-work_color_orange-1">div> p class="card-article__description"> Тут описываем какой мы сделали замечательный проект, причём в одиночку. Все эти бессонные ночи наедине с монитором и клавиатурой. p> header class="card-article__header"> Авторы: Ольга Сасквоч header> article> li> ul> main>

Как понять

Скопировать ссылку «Как понять» Скопировано

Каждый секционный элемент ( , , , ) может содержать элемент . Этот семантичный тег отделяет часть контента, которая напрямую связана с основным контентом секционного блока, но сама по себе не является основным контентом этого блока.

Классический пример — «шапка» сайта. В «шапке» может находиться навигация, лого, поисковая строка и так далее. Это содержимое страницы сайта только «обслуживает» основное, но не является основной темой страницы.

То же самое происходит в меньших масштабах — внутри любого вложенного секционного блока. Допустим, наш сайт продаёт велосипеды. На главной странице есть секция с каталогом. В начале каталога располагается меню с хлебными крошками к разным типам велосипедов. Меню лучше поместить в секции. Меню, очевидно, связано с каталогом, но это не основной контент. Основной контент — это карточки товаров в каталоге.

Ещё масштаб меньше — карточка товара . Тоже может иметь свой . В нём можно разместить любую информацию, которая будет связана с самим товаром, но не будет основной. Например, количество доступных товаров или иконка «Акция». Иконка «Акция» связана с товаром, но не основное содержимое карточки. Основной контент тут — фото и описание товара.

Важно не связывать только с «шапкой» сайта. Это семантичный тег, который отделяет основной контент секции от неосновного. В вёрстке он может располагаться в любом месте секционного блока, а не обязательно сверху. Лучше воспринимать как типографский колонтитул.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Тег — парный, он всегда закрывается.

   

Моя первая свёрстанная страничка

3 дня назад

header> h2>Моя первая свёрстанная страничкаh2> p>3 дня назадp> header>

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

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� У блочные стили по умолчанию ��

�� может содержать заголовок, а может не содержать. Если заголовок h1 — h6 указан в , то он будет формировать семантическую раскладку Outline страницы. Outline — это все заголовки всех уровней в виде дерева вложенностей (как оглавление):

     Блог великого программиста Васи   

Блог Васи

Вчера; Прошлая неделя; Прошлый месяц

Я прочитал всю спецификацию EcmaScript!

Сегодня я закончил последнюю главу спецификации. Теперь я точно знаю весь JavaScript!
DOCTYPE HTML> html lang="ru"> head> title>Блог великого программиста Васиtitle> head> body> h1>Блог Васиh1> section> header> nav> a href="?t=-1d">Вчераa>; a href="?t=-7d">Прошлая неделяa>; a href="?t=-1m">Прошлый месяцa> nav> h2>Я прочитал всю спецификацию EcmaScript!h2> header> p> Сегодня я закончил последнюю главу спецификации. Теперь я точно знаю весь JavaScript! p> section> body> html>

Поисковый робот увидит раскладку страницы так:

 1. Блог Васи1. Я прочитал всю спецификацию EcmaScript! 1. Блог Васи 1. Я прочитал всю спецификацию EcmaScript!     

Верхний уровень — «Блог Васи», следующий по вложенности — «Я прочитал всю спецификацию EcmaScript!».

�� Как структурируется содержимое страницы удобно проверять в валидаторе HTML от W3C.

�� Семантический вес для скринридеров тег имеет только в случае, если он напрямую вложен в тег . То есть когда выступает в роли обчной «шапки» страницы. В этом случае у будет ARIA-роль banner . Благодаря этой роли пользователи скринридеров могут быстро перемещаться к этой области с помощью специальных клавиш. Во всех остальных случаях не будет иметь семантического значения для скринридеров.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если придерживаться принципа, при котором в проекте каждый блок находится в отдельном файле, шапку можно реализовать один раз и вставлять уже готовый элемент на все страницы.

HTML: Шапка

Шапкой на сайте принято называть верхнюю область, в которой находятся контактные данные, меню, логотип. До появления стандарта HTML5 данную область просто размечали, используя обычный блок , что не вносило «смысла».

В HTML5 для разметки шапки сайта используется парный тег , внутри которого располагаются элементы.

  • Главная
  • О нас
  • Контакты

Тег по своему поведению не отличается от тега и не содержит отличных стандартных стилей, поэтому его можно использовать на любом сайте, не боясь нарушить внешний вид сайта.

Задание

Создайте разметку «шапки» сайта. Расположите внутри картинку и маркированный список из двух ссылок

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

  • Элемент header не является уникальным для страницы. Он может использоваться не только как шапка всей страницы, но и как шапка секции

Как закрепить шапку сайта при скролле страницы

Привет, друзья. Сегодня поговорим о том, как закрепить шапку сайта при прокрутке страницы. Наверняка вы все видели такой эффект, когда шапка сначала выглядит статичной, но когда вы начинаете изучать сайт и скролить, то она фиксируется в верхней части экрана и не покидает поле зрения.

При этом она может немного видоизменяться, меняя размер, цвет и содержимое. Давайте реализуем этот эффект, за который меня уже много лет «костерят» в комментариях из-за того, что тема раскрыта неполностью и исправим это недоразумение.

В свое время было недостаточно знаний, чтобы подробно проработать все нюансы, но теперь сделаю, практически, все популярные эффекты, которые могут понадобится при реализации этого блока.

Давайте начнем с того, что напишем какую-то стандартную разметку шапки, подключим jQuery, чтобы легче было манипулировать javascript и добавим скрипт, в котором и будем управлять состоянием и положением шапки.

Вот структура моего проекта.

HTML разметка шапки

Для примера я придумал такую структуру.

 
+38(095) 126-73-33

Мобильный
+38(095) 126-72-32

Многоканальный

Слева логотип, название сайта и его описание, а справа контактные телефоны, кнопка обратного звонка и кнопка меню. Типичная разметка для многих сайтов.

Дабавим немного стилей и получим такой внешний вид.

Пока, тут нет никаких особенностей. Это обычная шапка без дополнительных эффектов.

Исходник для изучения разметки, стилей и кода, как обычно, в конце статьи.

Теперь давайте подключим перед закрывающим тегом «body» jQuery и скрипт, в котором и будем писать js-код для управления состоянием и положением шапки.

Итак, давайте начнем с простейшего, добьемся того, чтобы шапка принимала статическое положение и перекрывала контент, который должен находится под ней.

Чтобы это сделать, у нас есть несколько подходов. Первый заключается в том, чтобы при прокрутке добавить шапке определенный класс, с новыми стилями, а второй в том, чтобы добавлять и удалять их прямо в js. Я считаю, что основные манипуляции с CSS нужно делать в таблице стилей, поэтому пойду первым путем, но для этого нужно показать стили шапки, которые я задал, чтобы вы лучше понимали, что происходит. Вот они.

.header < width: 100%; background: #fff; padding: 15px 0; z-index: 100; -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); >.header__inner

Так выглядят стили для обертки шапки и блок с ее содержимым. За счет такой структуры мы легко сделаем шапку фиксированной, а ее содержимое продолжит оставаться в центре на любом устройстве.

Как я уже говорил, для того чтобы «header» стал фиксированным при прокрутке, ему нужно поменять позиционирование на «fixed». Для этого, при помощи метода «scrollTop()» мы проверим значение прокрутки в окне браузера и в нужный момент добавим шапке класс, в котором и изменим позиционирование.

Звучит страшнее чем кажется. На самом деле все достаточно просто. Давайте в таблицу стилей добавим класс, при помощи которого шапка будет получать position: fixed.

.header_fixed

Обратите внимание, что z-index для того, чтобы при позиционировании шапка была над остальными элементами, я задал непосредственно классу header немного ранее.

Теперь давайте перейдем к написанию скрипта. Открывайте файл scripts.js и добавьте следующий код.

$(function() < let header = $('.header'); $(window).scroll(function() < if($(this).scrollTop() >1) < header.addClass('header_fixed'); >else < header.removeClass('header_fixed'); >>); >);

Здесь мы создаем переменную header и присваиваем ей наш элемент, в котором расположена шапка, чтобы было легче и удобнее им манипулировать. Затем пишем функцию, которая следит за прокруткой, и если мы прокрутили больше чем на 1 пиксели от начала окна браузера, то элементу с классом header добавляем недавно созданный класс «header_fixed», который и фиксирует шапку в верхней области экрана.

Начало положено. Теперь шапка при прокрутке ведет себя так, как нам нужно было и успешно фиксируется. Но мне не нравится рывок, который заметен, когда мы меняем позиционирование. Попробуйте покрутить.

Давайте исправим это. Происходи такое резкое смещение из-за того, что шапка занимала 90 пикселей и, соответственно, смещала контент вниз на 90 писклей, а когда мы прокрутили, мы вырвали из общего потока этот элемент и все сдвигается на его высоту. Чтобы этого избежать, предлагаю body, во время того, как шапка становиться фиксированной, дать отступ в 90 пикселей, которые мы теряем. Только я не буду топорно зашивать эту высоту в скрипт, а автоматический вычислю ее высоту и буду использовать это значение в вычислениях.

Опять же звучит страшно и заумно, но посмотрите, как все просто.

$(function() < let header = $('.header'); let hederHeight = header.height(); // вычисляем высоту шапки $(window).scroll(function() < if($(this).scrollTop() >1) < header.addClass('header_fixed'); $('body').css(< 'paddingTop': hederHeight+'px' // делаем отступ у body, равный высоте шапки >); > else < header.removeClass('header_fixed'); $('body').css(< 'paddingTop': 0 // удаляю отступ у body, равный высоте шапки >) > >); >);

В 3 строке я получаю число с высотой шапки. На 8 строке, добавлю отступ тегу body, равный высоте шапки, чтобы скомпенсировать ее, в тот момент, когда мы вырываем из общего потока шапку и минеям ей позиционирование.

Когда прокручиваем страницу обратно, и скрипт удаляет класс header_fixed, я также удалю и, теперь, лишний отступ у тега body.

Надеюсь, понятно объяснил и теперь у вас нет никакого рывка, при скролле, а шапка плавно фиксируется и позиционируется в верхней области экрана.

Изменение высоты шапки и цвета

Теперь давайте разбираться, как при прокрутке изменить высоту шапки. Это достаточно популярный эффект, о котором вы меня часто спрашивали.

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

Но давайте на этот раз я не буду задавать отдельный класс, а покажу как изменить стили прямо в js. Итак, задача при прокрутке на 300 пикселей при помощи jQuery плавно изменить высоту шапки и ее цвет.

if($(this).scrollTop() > 300) < header.css(< 'padding': '5px 0', 'background': '#f6ffdb', 'transition': '.3s' >); > else < header.css(< 'padding': '15px 0', 'background': '#ffffff', 'transition': '.3s' >); >

Как видите, благодаря методу «.css» можно манипулировать стилями прямо из jQuery. Отступ был по 15 пикселей сверху и снизу, а я заменил его на 5, за счет чего шапка стала меньше на 20 пикселей. Цвет сделал бледно желтым, а при помощи свойства transition сделал эффект перехода из одного состояния в другое более плавным.

Как удалить/скрыть элемент из шапки при прокрутке страницы

Этот вопрос мне также периодически задавали в соцсетях, поэтому решил вынести его в отдельный пункт. Наверняка вы уже догадались, если дочитали статью до этого момента. Ничего нового, увы, тут не будет. Все также, как выше. Получим id или class элемента и добавим ему свойства для скрытия. Например «display: none» в простейшем случае.

Для примера давайте скроем один из номеров телефонов. Это будет сложнее, так как у обоих номеров одинаковый класс. Напомню, блок с контактами у меня выглядит так:

+38(095) 126-73-33

Мобильный
+38(095) 126-72-32

Многоканальный

Теперь давайте в js напишем код, отвечающий за скрытие одного из номеров. Пусть это событие случается, когда мы прокрутили окно на 500 пикселей, но давайте, чтобы не повторятся, будем не просто стили менять или классом манипулировать, а воспользуемся методами fadeIn|fadeOut для плавного скрытия и появления элемента.

let mobileTel = $(‘.header__tel’).first(); // сохранем в переменную первый элемент с классом header__tel if($(this).scrollTop() > 500) < mobileTel.fadeOut(); >else

Вот, что мы получили:

Вот такой, достаточно простой эфеект получился. Надеюсь, все основные нюансы по закреплению шапки учел. Если будут еще какие-то вопросы, задавайте в комментариях.

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

Теперь разберёмся с меню. Чтобы привести его в порядок, нужно:

обнулить левый отступ у списка (по умолчанию он всегда задан встроенными стилями браузера),
вытянуть пункты меню в линию,
задать отступы между пунктами меню,
предусмотреть красную плашку под активным пунктом,
убрать стандартные точки перед пунктами списка,
стилизовать ссылки.

Ещё нужно заставить меню занимать всё свободное место и прижимать номер телефона к правому краю страницы.

Изучим макет. Отступы между пунктами меню — 40 пикселей:

Ширина отступов от краёв плашки активного пункта меню до текста внутри неё — 10 пикселей по бокам и по 8 пикселей сверху и снизу. Плашку я специально сделал полупрозрачной, чтобы разглядеть красные цифры разметки:

Расстояние от логотипа до меню — 40 пикселей:

Вытягиваем пункты меню в линию, убираем точки, обнуляем отступы со всех сторон — они нам не нужны. Само меню должно занимать всё доступное место — добавляем flex-grow :

.menu < flex-grow: 1; >.menu ul

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать margin у ссылок, а у активного элемента padding

Задаём отступы между пунктами меню. Ставим 20 пикселей, а не 40, потому что по 10 с каждой стороны отъедает плашка каждого пункта меню. Нам нужно это учесть, чтобы ничего не дёргалось при переключении. У последнего пункта нужно убрать отступ справа, чтобы он не мешался. Саму плашку будем делать у ссылки:

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать margin у ссылок, а у активного элемента padding

.menu li < margin-right: 20px; >.menu li:last-child < margin-right: 0; >.menu a

Добавляем отступ справа от логотипа в 30 пикселей. В сумме с левым padding в 10 пикселей, который задан у невидимой плашки пункта меню, будет 40:

.logo

Добавляем стили плашки активного пункта меню. Тут можно пойти разными путями: поставить класс active у li или у самого элемента с плашкой. Мы пойдём вторым путём. Подразумеваем, что внутри li находится либо ссылка, либо какой‑нибудь элемент с классом active :

.menu a, .menu .active < display: block; padding: 8px 10px; >.menu .active

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

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