Назад
Вперед
Зміст
Лабораторна робота № 14 (Flex-Box)
Завдання 1
-
Розмітити сторінку:
-
Використовуємо елемент <header> з заголовком верхнього рівня всередині, та елемент <section>,
що містить елементи <article>.
-
HTML-елемент <header> є вводним контентом, зазвичай групою вступних або навігаційних засобів.
Він може містити інші елементи-заголовки, а також логотип, форму пошуку, ім'я автора та інші елементи.
-
HTML-елемент <section> — це автономний розділ, який не може бути представлений більш точним за семантикою елементом
всередині HTML-документа. Зазвичай, але не завжди, розділи мають заголовок.
-
HTML-елемент <article> представляє самостійну частину документа, сторінки, застосунку або сайту, призначену для
незалежного поширення або повторного використання. Цей елемент може представляти статтю на форумі, статтю в журналі або газеті,
запис у блозі чи будь-який інший самостійний фрагмент контенту.
-
Картинки знаходяться в папці WEBкартинки/Flex, зробити спливаючі підказки до кожного flex-блоку.
-
Додати Flex-властивості, щоб ваша сторінка виглядала як на зразку.
Варіант 1
Скопіювати у свою папку файли: Осень1.jpg, Осень2.jpg, Осень3.jpg, Осень.txt
Створити документ наступної структури та оформлення:
- body: Загальні властивості: шрифт Arial, розмір 16pt, колір шрифту #800000.
- header: Містить заголовок h1. Фон #F5F5DC, відступи 2%.
- h1: Розмір шрифту 36pt, вирівнювання по центру.
- section: Містить 3 блоки article. Властивості секції визначити самостійно.
- article: Кожен містить абзац p і заголовок h1, у заголовок вкладено зображення img.
- img: Ширина 70%, рамка ridge 5px, колір #D2691E, border-radius 0.5em.
- p: Відступи 5%, вирівнювання по ширині.
- article: Відступи та поля по 10px, ширина блоків однакова.
- Фони article:
1-й: #FFFACD
2-й: #FFDAB9
3-й: #F5FAAA
- footer: Фон #F5F5DC, відступи 2%, вирівнювання по центру.

Варіант 2
Скопіювати файли: Норвегия1.jpg, Норвегия2.jpg, Норвегия3.png, Норвегия.txt, golub354.jpg
- body: Шрифт Courier New, 14pt, жирний, колір navy, фон — малюнок golub354.jpg.
- header: Фон navy, текст білий, відступи 2%.
- h1: Розмір 36pt, центроване вирівнювання.
- section: 3 article, властивості визначити самостійно.
- article: Містить p і h1, в h1 — img.
- img: Ширина 70%, рамка ridge 5px, синя, border-radius 0.5em.
- p: Відступи 5%.
- article: Відступи і поля 10px, ширина блоків у співвідношенні 2:1:2.
- Фони article:
1-й: #87CEFA
2-й: #E0FFFF
3-й: #E6E6FA
- footer: Фон navy, текст білий, відступи 2%.

Варіант 3
Скопіювати файли: Зима1.jpg, Зима2.jpg, Зима3.jpg, Зима.txt
- body: Comic Sans MS, 16pt, колір navy, фон #A6CAF0.
- header: Білий фон, відступи 2%.
- h1: 36pt, центроване.
- section: 3 article, властивості свої.
- article: Кожен з p і h1, в h1 — img.
- img: 70%, рамка ridge 5px синя, border-radius 0.5em.
- p: Відступи 5%, вирівнювання по ширині.
- article: Відступи і поля 10px, ширина 1:2:1.
- Стилі article:
1-й: фон navy, текст білий
2-й: фон #87CEEB, рамка ridge 5px синя, border-radius 0.5em
3-й: фон #4682B4, текст #FAFAD2
- footer: Білий фон, відступи 2%, жирний, центрований текст.

Варіант 4
Скопіювати файли: Италия1.jpg, Италия2.jpg, Италия3.jpg, Италия.txt, фон1.jpg, фон2.jpg, фон3.jpg, фон4.jpg
- body: Tahoma, 16pt, колір navy, фон — малюнок фон1.jpg.
- header: Фон lightpink, відступи 2%.
- h1: 36pt, колір purple, центр.
- section: 3 article, властивості свої.
- article: p і h1, в h1 — img.
- img: 70%, рамка ridge 5px біла, border-radius 0.5em.
- p: Відступи 5%, вирівнювання по ширині.
- article: Відступи і поля 10px, ширина 1:2:2.
- Фони article:
1-й: фон — малюнок фон2.jpg
2-й: фон — малюнок фон4.jpg
3-й: фон — малюнок фон3.jpg, текст білий
- footer: Фон lightpink, текст purple, відступи 2%, жирний, центрований.

Варіант 5
Скопіювати файли: od1.jpg, od2.jpg, od3.jpg, od4.jpg, Бунин.txt, FON.JPG
- body: Arial, 14pt, колір darkslategrey.
- header: Фон — малюнок FON.JPG, відступи 2%.
- h1: 36pt, колір olivedrab, центр.
- section: 4 article, свої властивості.
- article: Відступи 10px, ширина 1:2:2:1.
- 1-й і 4-й article: фон darkhaki, містять p і h2.
p: відступи 5%, вирівнювання по ширині.
h2: вирівнювання по центру.
- 2-й і 3-й article: містять h2 і h1 (з img у h1).
img: 70%, рамка ridge 5px біла.
h2: вирівнювання по центру.
- Фони:
2-й — lightblue
3-й — lightgreen
- footer: Фон — малюнок FON.JPG, відступи 2%, колір olivedrab, центр, жирний.

Варіант 6
- body: Georgia, 16pt, darkred, фон — малюнок fon2.jpg.
- header: Фон — малюнок fon3.jpg, відступи 1%, поля 10px.
- h1: 36pt, колір saddlebrown, центр.
- section: 4 article, свої властивості.
- article: Відступи і поля 10px, ширина 2:1:1:2.
- 1-й і 4-й article: містять p і h1 (з img у h1).
img: 70%, рамка ridge 5px біла, border-radius 0.5em.
p: відступи 5%, вирівнювання по ширині.
фон — darkgrey.
- 2-й і 3-й article: містять p, фон — малюнок fon3.jpg.
p: відступи 5%, вирівнювання по ширині.
- footer: Фон darkgrey, відступи 2%, поля 10px, центр, жирний.

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