<div class=«user»>
<img src=«img/User Картинка» alt=«user» class=«user-icon»>
<p class=«user-text»> User </p>
</div>
В целом код шапки второго типа получился такой:
<header>
<div class=«container»>
<div class=«header»>
<img src="img/Logo.png» alt=«logo» class=«logo»>
<nav class=«menu-list»>
<a href=«#» class=«menu-link»> Menu One </a>
<a href=«#» class=«menu-link»> Menu Two </a>
<a href=«#» class=«menu-link»> Menu Three </a>
<a href=«#» class=«menu-link»> Menu Four </a>
</nav>
<div class=«user»>
<img src=«img/User icon.png» alt=«user» class=«user-icon»>
<p class=«user-text»> User </p>
</div>
</div>
</div>
</header>
Кратко опишу теги, примененные выше в коде
<a href=«»> Menu </a> это тег ссылки. Нажимая на ссылку, мы можем перейти на другую страницу сайта или на другой сайт. В данном теге обязательно должен быть атрибут href, в него записывают адрес страницы, на которую ведет ссылка.
Лайфхак к ссылке: когда мы только пишем код, на любые ссылки необходимо ставить «затычки» #:
<a href=«#»> </a>
<nav> используют для обозначения содержимого в форме основных навигационных ссылок. Документ может иметь несколько данных элементов, к примеру, один для навигации по сайту, а второй для навигации по странице.
<p> определяет абзац в HTML-документе, при его отображении браузер автоматически вставляет до и после него отступы.
Оформляем шапку первого типа в CSS
Описать универсальное оформление шапки сайта в CSS на порядок сложнее, чем в HTML, постараюсь указать основное.
Во-первых, нам нужно ограничить контейнер, то есть задать ему максимальную ширину, для каждого макета она своя, а также выравниваем содержимое данного контейнера по середине margin: auto;
.container {
max-width: 1140px;
margin: auto;
}
В классе header можно поставить универсальное выравнивание элементов по центру, чтобы выровнять логотип соответственно прочим элементам шапки, также универсально распределение элементов органично по длине шапки и пр.
.header {
display: flex; /*выравнивание по центру по вертикали*/
align-items: center; /*раскидываем по сторонам*/
justify-content: space-between;
}
justify-cоntent: space-between; данное свойство равномерно распределяет элементы по всей строке. Первый и последний элемент прижимаются к соответствующим краям нашего контейнера. В целом про свойство justify-content смотрите далее.
display: flex; делает все дочерние элементы резиновыми flex, а не блочными, как было изначально. Если родительский блок содержит, например, графические элементы, они становятся анонимными flex-элементами.
Оформим непосредственно меню, ниже указан пример, отмечу, что при работе над проектом данные вы должны смотреть в своем макете (боковая панель слева).
.menu-link {
font-size: 16px;
line-height: 24px;
color: #2E266F;
text-decoration: none;
margin-right: 45px;
}
Кратко опишу теги, примененные выше в коде
text-decoration: none; убирает автоматическое подчеркивание в созданном нами списке
font-size: определяет размер шрифта элемента.
line-height: высота строки.
color: определяет цвет текста.
Причем существует несколько цветовых моделей, через которые можно указать значение цвета.
Так зеленый цвет можно вывести в свойстве color как:
green
#41AB0D
rgb (255,0,0)
rgba (255,100,0,.5)
hsl (0, 20%, 50%)
hsla (221, 100%, 50%,.8) и пр.
Самые популярные это green и #41AB0D.
Через # записывается шестнадцатеричная система счисления цвета. Выше приведена сокращенная запись hex-цветов.
Есть специализированные сайты, с помощью которых можно узнать название того или иного цвета, его прочие цветовые модели. Например, сайт Сolorscheme https://colorscheme.ru/color-names.html
max-width: устанавливает максимальную ширину элемента.
margin: auto; свойство margin в значении auto применяется для горизонтального центрирования элемента в его контейнере. Данный элемент будет занимать заданную ширину, а остальное пространство будет равномерно распределено между левым и правым полями.
Оформляем шапку второго типа в HTML с помощью Bootstrap
Оформляем с помощью библиотеки Bootstrap, как ее подключить расскажу далее.
<header class=«container header»>
<div class=«row»>
<div class=«col-2»>
<a href="/" class=«logo-link»>
<img width=«128» src=«img/Фото логотипа» alt=«logo» class=«logo-image»>
</div>
</div>
<div class=«col-6»>
<nav>
<ul class=«navigation»>
<li class=«navigation-icon»>