курси програмування для дітей безкоштовно

9 Тег 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: Створіть кілька загадок. Додайте прикольний фон чи інші цікаві ефекти

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *