Примечания к статье:
- <nav>, <body>, <h1> — HTML теги. Отвечают за разметку элементов.
- <font-size>, <background>, <color> — CSS свойства. Отвечают за стилизацию элементов
- #h1 и .menu-list — идентификатор и класс для элемента. Используется в качестве селектора.
Здравствуйте, в этой статье мы продолжим рассказывать о создании лендинга. Как вы помните, мы создали простую HTML-разметку, которую будем видоизменять.
Сейчас мы поговорим о создании шапки для сайта. В ней уже расположено наше навигационное меню и логотип в виде текста.
Одна из главных составляющих любой разработки — планирование действий. Давайте спланируем все этапы создания:
- Расположение, позиционирование и определение размеров шапки.
- Создание фона, рамок и общая стилизация блока.
- Разметка — выбор основных панелей для меню и их расположение.
- Создание логотипа. В этой статье мы создадим логотип из текста. Отличная возможность попрактиковаться в создании красивых шрифтов.
- Создание анимации для кнопок навигационной панели.
Итак, мы создали план работы, теперь приступаем к его выполнению
Позиционирование элементов.
Для начала, удалите все пункты меню и текст заголовка, который мы расположили ранее. Он являлся основой для макета, но пока что его следует удалить.
У нас есть тег <header> и блок <nav>. Первый отвечает за разметку шапки, а второй будет вмещать в себя навигационную панель.
Задайте ссылки на селекторы. Для тега <header> необходимо задать идентификатор <header>, для этого используйте свойство id. Для тега nav создайте класс menu, с помощью тега <class>.
Идентификатор не является обязательным, но это является правилом хорошего тона в разработке.
Открываем CSS документ(он должен быть подключен). Затем записываем несколько селекторов:
- — #header: основной селектор, который будет отвечать за стилизацию шрифтов;
- — .menu: отвечает за стилизацию верхнего меню;
- — <body>: отвечает за стилизацию общего блока страницы.
Далее нам понадобятся и другие селекторы, но пока что остановимся на этом.
Сначала задаем свойства для тега body. Это будут отступы и ширина. Шрифты не задаем, так как будем использовать специальную систему шрифтов. Подробнее о ней можно узнать в другой статье.
Свойства для тега <body>:
- <Margin> — расположение блока по центру.
- <Width> — ширина общего контейнера, 80% от всей ширины страницы.
Теперь необходимо задать свойства для шапки. Зададим фиксированное позиционирование, высоту, рамку и фон. Используемые свойства:
- Position: fixed — теперь шапка будет оставаться вверху всегда, даже при прокрутке страницы.
- <Height> — высота будет равняться 12% от высоты экрана.
После этого необходимо задать ширину и позиционирование для меню.
Используемые свойства:
- <Width>: — ширина блока меню.
- {Position: absolute} — абсолютное позиционирование. Используется для свободного перемещения элементов.
- <Height> — высота.
Свойства перемещения для меню пока что не используются, так как нет контента, а значит и отсутствует видимость содержимого.
Дизайн шапки
Итак, мы расположили нашу шапку. Теперь она будет зафиксирована на странице, и не будет перемещаться при работе скролла.
Для начала зададим свойства фона, с помощью свойства <background>. При создании шапки обычно используются цвета, картинки практически не используются.
Далее задаем свойства рамок. В нашем примере мы создадим рамку с 3 границами — нижней, левой и правой. Верхняя граница нам не понадобится, так как она плохо отразится на качестве дизайна.
Используемые свойства:
- <Background> — создание фона.
- <Border-bottom>, <border-left>, <border-right> — создание трехсторонней рамки.
Ваш код должен выглядеть примерно так:
Разметка меню и логотипа
Теперь добавим контент в шапку. Нам необходимо добавить заголовок 1 уровня, который будет использоваться в качестве логотипа, а также навигационное меню.
Используемые селекторы:
- — #h1 — идентификатор логотипа, задается для тега <h1>.
- — .menu-list — класс ссылки из меню. Задается для тега <li>.
Для начала разместите логотип, он не должен находиться в блоке "nav", так как не является частью навигационной панели.
Далее расположим меню. Для этого создадим список из 3-х мини-блоков. В них будут содержаться ссылки на такие ссылки: "Главная, О нас, Контакты".
Содержимое каждого тега "li" должно быть обернуто в тег ссылки(a). Для атрибута "href" достаточно указать значение "#".
Далее идет стилизация элементов. Сначала займемся логотипом. Мы не будем использовать нашу систему шрифтов, так как работа над логотипом проходит отдельно.
Все что нам понадобится — изменение размеров шрифта, семейства, стиля и жирности. Кроме этого нам понадобятся свойства изменения текста.
body{
width: 80%;
margin: 0 auto;
font-family: «Tahoma», serif;
}
#header{
position: fixed;
height: 12vh;
background: #272727;
width: 80%;
border-bottom: 3px solid #808080;
border-left: 3px solid #808080;
border-right: 3px solid #808080;
}
.menu{
position: absolute;
width: 50%;
height: 8vh;
top: 10px;
right: 100px;
outline: none;
}
Используемые свойства:
- <Font-size> — размер шрифта.
- <Font-weight> — жирность шрифта.
- <Font-family> — семейство шрифта.
- <Font-style> — стиль шрифта.
- <Letter-spacing> — расстояние между буквами.
- <Margin> — отступы.
- <Line-height> — высота строки.
После этого нам нужно расположить блоки меню:
- <Top>, <bottom>, <left>, <right> — размещение меню.
- <Margin> — внешние отступы.
Задаем позиционирование для элементов меню:
- <Position> — позиционирование.
- <Margin> — внешние отступы.
- <Text-decoration> — декорации для текста.
- <Padding> — внутренние отступы.
Создание анимации для кнопок
Теперь приступим к стилизации блоков меню. Нам необходимо стилизовать каждый блок меню, а также создать анимированное изменение блока, при наведении курсора.
Используемые селекторы:
- — .menu-href — класс для ссылки. Задается для тега <a>.
- — .menu-href:hover — псевдокласс для ссылки. Активируется при наведении.
Зададим стандартную стилизацию для блоков меню. Нам всего лишь необходимо изменить стилизацию шрифта — его семейство и размер, цвет шрифта и основу для анимации.
Семейство шрифтов задается в селекторе тега <body>. Размер шрифтов будем изменять с помощью системы шрифтов. Размер текста кнопок будет равен 15px, а значит создаем селектор f15px, который необходимо прописать для каждой из ссылок.
Остальные свойства указываются в селекторе ссылки.
Используемые свойства:
- <Font-size>.
- <Font-Family>.
- <Color> — задает цвет текста.
- <Transition> — задает время и стиль анимации изменения элемента.
Далее необходимо изменить стилизацию ссылок при наведении. Для этого запишем селектор .menu-href:hover.
В нем мы зададим изменение фона и цвета текста.
Используемые свойства:
- <Background>.
- <Color>.
В итоге, ваш CSS код должен выглядеть вот так:
Заключение
Мы проделали большую и хорошую работу и получили хороший результат — зафиксированную шапку страницы с качественной стилизацией. Конечно, можно добавить некоторые детали, но для урока мы выбрали простой материал.
Если хотите попрактиковаться, то можете создать новый HTML документ и создать шапку со своей стилизацией.
Если по какой-то причине у вас возникли проблемы, то перечитайте статью ещё раз, либо же скачайте исходники и изучите их. Желаем удачи в изучении!