Складаємо робота https: //codeclubprojects. org id=“name“Вивчаємо id

Скачать презентацию Складаємо робота https: //codeclubprojects. org  id=“name“Вивчаємо id Скачать презентацию Складаємо робота https: //codeclubprojects. org id=“name“Вивчаємо id

12_build_a_robot.pptx

  • Размер: 1.7 Мб
  • Автор:
  • Количество слайдов: 14

Описание презентации Складаємо робота https: //codeclubprojects. org id=“name“Вивчаємо id по слайдам

Складаємо робота https: //codeclubprojects. org Складаємо робота https: //codeclubprojects. org

id=“name“Вивчаємо id id=“name“Вивчаємо id

Застосування • HTML    img id=face  • CSS #face { position:Застосування • HTML • CSS #face { position: absolute; top: 200 px; left: 100 px; }

Стилі CSS position: absolute | fixed | relative | static | inherit position: absoluteСтилі CSS position: absolute | fixed | relative | static | inherit position: absolute | fixed | relative left top right bottom

Завдання проекту Завдання проекту

1. Додати очі до обличчя робота Використовуємо готові теги img, додаючи обраним елементам певні1. Додати очі до обличчя робота Використовуємо готові теги , додаючи обраним елементам певні стилі CSS для id #eyes 2 { width: 200 px; position: absolute; top: 170 px; left: 100 px; }

2. Додаємо інші частини обличчя #mouth 1 #nose 2 #ears 1 #antenna ………… Для2. Додаємо інші частини обличчя #mouth 1 #nose 2 #ears 1 #antenna ………… Для кожного з елементів не забуваємо коригувати width top left

Додаткове завдання Намалюємо з допомогою блоків div тіло робота, руки та ноги Додаткове завдання Намалюємо з допомогою блоків

тіло робота, руки та ноги

1.  Знаходимо, що є спільного у всіх блоках div та записуємо спільні стилі1. Знаходимо, що є спільного у всіх блоках

та записуємо спільні стилі CSS для тегу div 2. Шукаємо, що є спільного у блоках, які зображують руки / ноги, створюємо класи для рук / ніг та записуємо спільні стилі CSS для цих класів 3. Решту, що є унікальним для кожного окремого блоку редагуємо з допомогою ідентифікаторів