Назад Вперед Зміст

Лабораторна робота № 14 (Flex-Box)

Текст візміть тут!!!

Завдання 3

1. Розмітити сторінку:

   • Використати елемент <header> із заголовком найвищого рівня всередині та елемент <section>, який містить елементи <article>.

     • HTML-елемент <header> являє собою вступний контент, зазвичай групу вступних або навігаційних засобів. Він може містити інші елементи-заголовки, а також логотип, форму пошуку, ім’я автора та інші елементи.

     • HTML-елемент <section> являє собою автономний розділ — який не може бути представлений точнішим за семантикою елементом — всередині HTML-документа. Як правило, але не завжди, розділи мають заголовок.

     • HTML-елемент <article> являє собою самостійну частину документа, сторінки, застосунку або сайту, призначену для незалежного розповсюдження або повторного використання. Цей елемент може представляти статтю на форумі, публікацію в журналі чи газеті, допис у блозі або будь-який інший самостійний фрагмент контенту.

2. Зображення знаходяться в папці WEBкартинки/Flex. Зробити спливаючі підказки до кожного flex-блоку.
3. Додати властивості Flex, щоб ваша сторінка виглядала як на зразку.

Як за допомогою Flex-властивостей отримати сторінку? Адаптивність без медіа-запитів.

Варіант 1

1. Створити макет у три колонки: Пропорції 1:1:2.

2. Початкова розмітка:

   

Результат:

Варіант 2

1. Створити макет у три колонки: Пропорції 3:2:1. Адаптивність без медіа-запитів.

2. Початкова розмітка:

   

Результат:

Варіант 3

1. Створити макет у чотири колонки: Пропорції 2:1:2:1.

2. Початкова розмітка:

   

Результат:

Варіант 4

1. Створити макет у чотири колонки: Пропорції 1:2:3:1. Адаптивність без медіа-запитів.

2. Початкова розмітка:

   

Результат:

Варіант 5

1. Створити макет у п’ять колонок: Пропорції 3:2:3:3:2. Адаптивність без медіа-запитів.

Результат:

Варіант 6

1. Створити макет у п’ять колонок: Пропорції 3:2:3:3:2. Адаптивність без медіа-запитів.

Результат:

Назад Вперед Зміст