Створіть свою загадку, використовуючи тег div!
Тег div – супермега важливий інструмент, який є чи не в кожному сучасному сайті! Тож сьогодні ми будемо з них знайомитися, а заразом створимо сторінку з загадками!
Для початку пару загадок для вас:
Всі загадки розгадали ?
А давайте тепер створимо свою!
Тег div
Div – це тег-коробочка, в яку можна скласти інші теги. Для нього можна задати ширину і висоту, щоб div разом з тим, що в середині виглядав гарнесенько.
А що зазвичай кладуть в середину div? Та багато чого! Можуть бути і текст, і картинки, і, взагалі, багато різних тегів. Div допоможе розташувати все на сторінці, тому він такий незамінний.
Щоб ви не створювали : блог про життя-буття, інтернет-магазин чи соцмережу, ваш сайт буде завжди поділений на блоки, щоб його приємно було читати.
Практика
1: Оберіть тему для вашої загадки. Це може бути фільм, мультик, пісня чи країна. А може у вас виникне інша ідея ?
2: Створіть новий проєкт і додайте у файл стилів такий код:
body {
background-color: white;
font-family: Comic Sans MS;
}
div {
display: inline-block;
position: relative;
overflow: hidden;
margin: 2px;
background-color: white;
width: 300px;
height: 300px;
border: 2px solid black;
}
p {
position: absolute;
background: white;
bottom: -1em;
border-top: 2px solid black;
border-right: 2px solid black;
padding: 5px;
margin-right: -2px;
font-size: 10pt;
}
img {
height: 300px;
width: 300px;
display: block;
margin: 0 auto;
}
Ми покищо не будемо сильно зупинятися на стилях, тому тільки скопіюємо їх. Ці стилі зроблять наш блок div квадратним з чорною рамкою. Розташують картинку в середині. Після того, як зробите всі завдання, можете спробувати змінити якісь властивості в стилях і подивитися на ефект. Але тільки після того, як закінчите! Зараз стилі нічого не зможуть відобразити.
3: Давайте тепер зробимо першу частину загадки. У мене це буде картинка і підпис до неї. Я загадала мультик, тож в підписі буде фраза з мульта. Поїхали!
<h1>Вгадай мультик</h1>
<div>
<img src="https://sviatobum.ua/image/cache/import_files/62/6241de12-7aac-11ee-b92a-b8ca3aad62e7-1000x1000.jpeg">
<p>Заради деяких і не шкода розтанути.</p>
</div>Змініть назву, картинку і підпис на те, що підходить для вашої загадки.
4: Додайте ще 2-3 блоки div з іншими картинками й підписами. Додайте стільки, щоб загадку можна було відгадати за вашими підказками.
5: Створіть кілька загадок. Додайте прикольний фон чи інші цікаві ефекти
