Лекция 6. Позиционирование элементов

Что почитать

Абсолютное позиционирование

Выполнить

Абсолютное позиционирование

Задание 1. Используя код HTML представленный ниже, с помощью позиционирования элементов добейтесь расположения представленного на картинке. Тип позиционирования: absolute.

See the Pen Изучаем позиционирование by Alex (@Asmodey) on CodePen.

Обратите внимание на фон. Серый квадратик имеет ширину и высоту 20px.

Результат должен выглядеть так:


Задание 2. Используя предыдущее задание и способ позиционирования absolute добейтесь следующего результа:


Задание 3. Используя свойство position: absolute соберите домик:

See the Pen Позиционирование «Собери домик» by Alex (@Asmodey) on CodePen.

Относительное позиционирование

Выполнить

Относительное позиционирование

Задание 4. Измените позиционирование в задании 1 данной страницы на относительное. Внесите корректировки в CSS для достижения нужного результата.


Задание 5. Измените позиционирование в задании 2 данной страницы на относительное. Внесите корректировки в CSS для достижения нужного результата.


Задание 6. Измените позиционирование в задании 3 данной страницы на относительное. Внесите корректировки в CSS для достижения нужного результата.


Последний рубеж

Выполнить

Задание 7. Скачайте архив по ссылке. Распакуйте в папку рабочего проекта. Задание — используя имеющиеся в папке images рисунки выполнить верстку заголовка из магазина Sokol. Результат работы:


Задание 8. Скачайте архив по ссылке. Распакуйте в папку images рабочего проекта. Задание — используя имеющиеся в папке images рисунки выполнить верстку карты товара из магазина Розетка. Результат работы:


Задание 9. Скачайте архив по ссылке. Распакуйте в папку images рабочего проекта. Задание — используя имеющиеся в папке images рисунки выполнить верстку карты товара из магазина ПроКотлы. Результат работы:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *