Практична № 5. Використання модуля CSS Flexbox | Модуль Вебтехнології | 10(11) клас | Речич

Інформатика : вебтехнології (вибірковий модуль для учнів 10–11 класів, рівень стандарту) / Н. В. Речич.

Практична робота № 5. Використання модуля CSS Flexbox.

Візьміть за основу навігаційну панель, розроблену в практичній роботі № 2.
1. Відкрийте в редакторі коду HTML-файл index.html. Призначте елементу ul клас контейнер (рис. 1).
2. Розмістіть на формі кілька компонентів. Змініть їх розташування та розміри.
3. Відкрийте в редакторі коду CSS-файл style.css. Оголосіть створений клас із наведеними атрибутами (рис. 2).
4. Призначте елементам списку атрибути, як наведено на рис. 3. Замість запропонованих кольорів виберіть на свій розсуд колір і колір межі.
5. Перегляньте браузером отриманий результат. Зробіть скріншот і розмістіть його на слайді презентації з відповідним записом значення модуля Flexbox.
6. Замініть значення атрибута flex-direction на column-reverse.
Збережіть і оновіть сайт у браузері. Зробіть скріншот і розмістіть його на наступному слайді презентації.
7. Перегляньте сайт при зміні значень атрибута flex-direction на row-reverse і row відповідно.
Зробіть скріншоти, збережіть їх у презентації.
8. Додайте атрибут justify-content. Надайте значення center, flex-start, flex-end, space-around. Зробіть скріншоти для кожного значення атрибута.
9. Збільшіть висоту контейнера (height: 200рх або 300рх). Додайте атрибут align-items.
Перегляньте й зробіть скріншоти для значень center, flex-start, flex-end, stretch.
10. Зробіть висновок про природу значення stretch атрибута align-items і space-around атрибута justify-content.
11. Скористайтеся для перевірки браузером Google Chrome (сполучення клаівіш Ctrl + Shift +І або права кнопка миші).
12. Виберіть у контекстному меню команду Перевірити.
Відкриється панель інспектора коду.
13. Виберіть у рядку меню команду Панель перемикачів девайсів (Toggle device toolbar) (рис. 4, а).
Клацнувши цю команду, можна вибирати емуляцію девайса (рис. 4, б). Якщо девайса, який нас цікавить, у списку немає, то, клацнувши команду Edit, можна пошукати в додатковому меню (рис. 4, в).
14. Проаналізуйте збережені скріншоти й запишіть отримані результати.
Зробіть висновок за результатами роботи.

Підтримати мою роботу: https://donatello.to/TaskInformatics

Підтримати мою роботу на Patreon:   / taskinformatics  

Завантажити текст практичного завдання: https://drive.google.com/file/d/1uxkR...

Посилання на посібник (Видавництво "Ранок"): https://www.ranok.com.ua/info-informa...