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

Практична робота 15

Варіант 1

Скопіювати файли Завдання 1 попередньої практичної роботи. Створити адаптивний сайт, який при різних значеннях ширини екрана виглядає по-різному.

1

Базове форматування: форматування з попередньої роботи.

Результат:

2

При ширині екрана більше 1200 виконується таке форматування:

• Розмір шрифту відносно базового — 150%.
• Шрифт у всіх блоках — Comic Sans MS.
• Колір фону у всіх блоках: #DAA520.
• Колір тексту у всіх блоках: #F5DEB3.

Результат:

3

При ширині екрана менше 500 пікселів виконується таке форматування:

• Розмір шрифту відносно базового — 80%.
• Шрифт у всіх блоках — Calibri.
• Усі блоки розмістити в стовпчик.
• Колір тексту у всіх блоках — darkgreen.
• У footer та header — колір фону darkseagreen;
• В інших блоках — колір фону #C0DCC0.

Результат:

Варіант 2

Скопіювати файли Завдання 1 попередньої практичної роботи. Створити адаптивний сайт, який при різних значеннях ширини екрана виглядає по-різному.

1

Базове форматування: форматування з попередньої роботи.

Результат:

2

При ширині екрана більше 1200 виконується таке форматування:

• Розмір шрифту відносно базового — 150%.
• Шрифт у всіх блоках — Comic Sans MS.
• Колір фону у всіх блоках: #DAA520.
• Колір тексту у всіх блоках: #F5DEB3.

Результат:

3

При ширині екрана менше 500 пікселів виконується таке форматування:

• Розмір шрифту відносно базового — 80%.
• Шрифт у всіх блоках — Calibri.
• Усі блоки розмістити в стовпчик.
• Колір тексту у всіх блоках — чорний.
• Весь текст жирний.
• Усі блоки без кольору фону.

Результат:

Варіант 3

Скопіювати файли Завдання 1 попередньої практичної роботи. Створити адаптивний сайт, який при різних значеннях ширини екрана виглядає по-різному.

1

Базове форматування: форматування з попередньої роботи.

Результат:

2

При ширині екрана більше 1200 виконується таке форматування:

• Розмір шрифту відносно базового — 150%.
• Шрифт у всіх блоках — Comic Sans MS.
• Колір фону у всіх блоках: navy.
• Колір тексту у всіх блоках: білий.

Результат:

3

При ширині екрана менше 550 пікселів виконується таке форматування:

• Розмір шрифту відносно базового — 70%.
• Шрифт у всіх блоках — Calibri.
• Усі блоки розмістити в стовпчик.
• Колір тексту у всіх блоках — білий.
• Весь текст жирний.
• Усі блоки без кольору фону та меж.

Результат:

Варіант 4

Скопіювати файли Завдання 1 попередньої практичної роботи. Створити адаптивний сайт, який при різних значеннях ширини екрана виглядає по-різному.

1

Базове форматування: форматування з попередньої роботи.

Результат:

2

При ширині екрана більше 1200 виконується таке форматування:

• Розмір шрифту відносно базового — 150%.
• Шрифт на сторінці Comic Sans MS.
• Фон у всіх блоках: фон3.jpg.
• Фон у header, footer зняти.
• Колір тексту у всіх блоках: #20B2AA.

Результат:

3

При ширині екрана менше 550 пікселів виконується таке форматування:

• Розмір шрифту відносно базового — 80%.
• Шрифт у всіх блоках Calibri.
• Усі блоки розмістити в стовпчик.
• Колір тексту у всіх блоках — #800000.
• Весь текст жирний.
• Усі блоки без кольору фону та меж.

Результат (фрагмент):

Варіант 5

Створити адаптивний сайт, який при різних значеннях ширини екрана виглядає по-різному.

1

Базове форматування:

Результат:

2

При ширині екрана більше 1200 виконується таке форматування:

• Розмір шрифту відносно базового — 150%.
• Шрифт у всіх блоках Comic Sans MS.
• Для чотирьох article встановити поля зліва та справа по 15px.
• Колір тексту у всіх блоках: #20B2AA.

Результат:

3

При ширині екрана менше 500 пікселів виконується таке форматування:

• Розмір шрифту відносно базового — 80%.
• Шрифт у всіх блоках Georgia.
• Усі блоки розмістити в стовпчик.
• Фон усієї сторінки — рисунок FON.JPG.
• Колір тексту у всіх блоках darkred.
• Весь текст жирний.
• Усі блоки без кольору фону.

Результат:

Варіант 6

Створити адаптивний сайт, який при різних значеннях ширини екрана виглядає по-різному.

1

Базове форматування: форматування .

Результат:

2

При ширині екрана більше 1200 виконується таке форматування:

• Розмір шрифту відносно базового — 150%.
• Шрифт у всіх блоках Comic Sans MS.
• Фон на всій сторінці як на скріні.
• Колір фону у всіх блоках indianred, колір тексту білий.
• Фон у header та footer знято. Колір тексту: indianred.

Результат:

3

При ширині екрана менше 500 пікселів виконується таке форматування:

• Розмір шрифту відносно базового — 80%.
• Шрифт у всіх блоках Calibri.
• Усі блоки розташувати у стовпчик.
• Колір фону всього документа lightgrey.
• Колір тексту у всьому документі чорний.
• Весь текст жирний.
• Усі блоки без кольору фону та без межі.

Результат:

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