Задание адаптивная верстка

Слайд 2

1. Flex-верстка

Откройте в редакторе кода файлы index.html и style.css
Выполните задания, указанные в

1. Flex-верстка Откройте в редакторе кода файлы index.html и style.css Выполните задания,
комментариях.
До задания ширины блоков в процентах убедитесь, что ваша верстка при задании ширины блоков в px является фиксированной.

Слайд 3

2. Создание меню

Добавьте теги для создания меню

Добавьте flex-свойства для селектора .nav-inner, чтобы

2. Создание меню Добавьте теги для создания меню Добавьте flex-свойства для селектора
пункты меню расположились как на картинке.
Добавьте свойства для оформления ссылок меню (селектор .nav-inner li a)
Добавьте стили ссылок меню при наведении (селектор .nav-inner li a:hover)

Убедитесь, что верстка меню получилась резиновой!

Слайд 4

3. Медиа-запросы

Добавьте в файл style-css медиа-запрос для контрольной точки 992px. Проверьте, как

3. Медиа-запросы Добавьте в файл style-css медиа-запрос для контрольной точки 992px. Проверьте,
изменится дизайн сайта при ширине экрана меньше 992px.

Слайд 5

4. Медиа-запросы

Добавьте медиа-запрос для планшета (768px), в котором:
Уменьшите высоту для каждого блока
Уменьшите

4. Медиа-запросы Добавьте медиа-запрос для планшета (768px), в котором: Уменьшите высоту для
верхний отступ для каждого блока
Расположите блоки aside и .content друг под другом
Имя файла: Задание-адаптивная-верстка.pptx
Количество просмотров: 33
Количество скачиваний: 0