Создаем свою собственную Шапку
Поскольку ваш сайт будет просматриваться на разных устройствах, пришло время создать постраничную навигацию, которая сможет реагировать на разные размеры экрана!
Приготовьтесь…
- Создать шапку для вашего сайта, которая содержит компонент навигации
- Сделать компонент навигации адаптивным
Попробуйте сами — Создайте новый компонент Header
Заголовок раздела Попробуйте сами — Создайте новый компонент Header-
Создайте новый компонент Header. Импортируйте и используйте существующий компонент
Navigation.astro
внутри элемента<nav>
, который находится внутри элемента<header>
.Покажите мне код!
Создайте файл с именем
Header.astro
вsrc/components/
Попробуйте сами — Обновите ваши страницы
Заголовок раздела Попробуйте сами — Обновите ваши страницы-
На каждой странице замените ваш существующий компонент
<Navigation/>
на вашу новую шапку.Покажите мне код!
-
Проверьте предварительный просмотр в браузере и убедитесь, что ваша шапка отображается на каждой странице. Пока она не выглядит иначе, но если вы проверите предварительный просмотр с помощью инструментов разработчика, вы увидите, что у вас теперь есть элементы, такие как
<header>
и<nav>
вокруг ваших навигационных ссылок.
Добавьте отзывчивые стили
Заголовок раздела Добавьте отзывчивые стили-
Обновите
Navigation.astro
классом CSS для управления навигационными ссылками. Оберните существующие навигационные ссылки в<div>
с классомnav-links
. -
Скопируйте приведенные ниже стили CSS в файл
global.css
. Эти стили:- Стилизируют и позиционируют навигационные ссылки для мобильных устройств
- Включают класс
expanded
, который можно переключать для отображения или скрытия ссылок на мобильных устройствах - Используют
@media
запрос для определения различных стилей для больших размеров экрана
Начните с определения того, что должно происходить на малых размерах экрана! Маленькие размеры экрана требуют более простых макетов. Затем адаптируйте ваши стили, чтобы учесть более крупные устройства. Если вы сначала спроектируете сложный вариант, потом вам придется потрудиться, чтобы снова сделать его простым.
Измените размер окна и посмотрите, какие стили применяются при разной ширине экрана. Теперь ваша шапка адаптивна к размеру экрана с помощью @media
запросов.
Чек-лист
Заголовок раздела Чек-листРесурсы
Заголовок раздела Ресурсы-
Дизайн основанный на компонентах внешняя ссылка
-
Семантические теги HTML внешняя ссылка
-
Mobile-first дизайн внешняя ссылка