FlexBox. Часть 1.
https://flexboxfroggy.com/#ru - знакомство с флекс-боксом в режиме игры
Сначала попробуйте выполнить работу без просмотра этого видео:
Ссылки на статьи из видео:
https://html5.by/blog/flexbox/
https://html5book.ru/css3-flexbox/
https://habr.com/ru/post/242545/
https://habr.com/ru/post/467049/
2. На макетах часто показываются элементы меню при наведении (смотрите видео по верстке внимательнее, мы уже говорили) и иногда помечают такой элемент рукой, которая появляется при наведении мышкой на ссылку вместо курсора. В нашем макете именно такой случай, то есть элемент Тренинги показан как будет выглядеть при наведении мышкой.
3. Если на макете не показан как выглядит элемент при наведении, но все равно сверстайте так, чтобы элемент менялся при наведении, например, цвет фона измените.
используйте colorzilla для получения точного цвета!
Градиенты разные бывают, но на практике применяется в основном только линейный.
Чтобы задать градиентный фон элементу достаточно такой записи:
background: linear-gradient(to bottom, red 0%, yellow 100%);
И у нас будет градиент от красного до желтого.
Хватит теории, посмотрите на генератор градиентов:
http://www.colorzilla.com/gradient-editor/
Он генерирует код с вендорными префиксами, чтобы была поддержка оооочень старых браузеров, и заодно обычный одноцветный фон (в первой строке) - для сооовсем дреевних браузеров.
Пред. урок След. урок
Сначала попробуйте выполнить работу без просмотра этого видео:
Ссылки на статьи из видео:
https://html5.by/blog/flexbox/
https://html5book.ru/css3-flexbox/
https://habr.com/ru/post/242545/
https://habr.com/ru/post/467049/
Практическая заметка про верстку меню сайтов
1. Все меню верстаются с помощью тегов ul li a! То есть каждый элемент в меню является ссылкой для перехода на другую страницу (логично ;) ), и поскольку меню это список элементов, то используем тег UL.2. На макетах часто показываются элементы меню при наведении (смотрите видео по верстке внимательнее, мы уже говорили) и иногда помечают такой элемент рукой, которая появляется при наведении мышкой на ссылку вместо курсора. В нашем макете именно такой случай, то есть элемент Тренинги показан как будет выглядеть при наведении мышкой.
3. Если на макете не показан как выглядит элемент при наведении, но все равно сверстайте так, чтобы элемент менялся при наведении, например, цвет фона измените.
используйте colorzilla для получения точного цвета!
Типичные ошибки при верстке меню сайта
CSS градиенты
Для выполнения задания вам понадобятся градиенты. Градиент - плавный переход от одного цвета к другому, например, от белого до синего.Градиенты разные бывают, но на практике применяется в основном только линейный.
Чтобы задать градиентный фон элементу достаточно такой записи:
background: linear-gradient(to bottom, red 0%, yellow 100%);
И у нас будет градиент от красного до желтого.
Хватит теории, посмотрите на генератор градиентов:
http://www.colorzilla.com/gradient-editor/
Он генерирует код с вендорными префиксами, чтобы была поддержка оооочень старых браузеров, и заодно обычный одноцветный фон (в первой строке) - для сооовсем дреевних браузеров.
Шпаргалка по flex
Пред. урок След. урок