Практическая работа «Блочная модель»

НАЧАЛЬНЫЕ НАСТРОЙКИ СТИЛЕЙ:

* {

    box-sizing: border-box;

}

html,

body {

    margin:0;

    padding:0;

}

ul {

    margin:0;

    padding:0;

}

ЗАДАНИЕ 1. (ОЦЕНКА 3)

1. Создайте блок с классом wrapper. Блок должен занимать всю высоту области просмотра (https://webref.ru/css/unit/vh)

2. Цвет блока с классом wrapper:#e1fafa (https://webref.ru/css/background-color)

3. Внутри блока с классом wrapper создайте список (тег ul) с классом gallery.

4. Внутри элемента с классом galleryдобавьте элемент списка (тег li) с классом gallery__item.

5. Для класса gallery__item установите следующие свойства:
   Ширина: 350px
   Высота: 200px
   Сплошная рамка шириной в 5px, красного цвета.

6. Добавьте в блок с классом gallery__item картинку squirrel (тег img). Картинке добавьте атрибут класс со значением gallery__img

7. Ширину картинке установите 100% от ширины родителя (в данном случаи родителем картинки является элемент спискаgallery__item)

8. Посмотрите на результат работы. Что нужно сделать чтобы картинка не выходила за пределы блока? Исправьте и покажите преподавателю.

ЗАДАНИЕ 2. (ОЦЕНКА 4)

1. Скопируйте элемент списка и вставьте два раза.

1. Установите нижний отступ у элемента с классомgallery__item – 20px

2. Добавьте внутренние отступы элементу с классомwrapper – 30px

Чтобы расположить элементы на одной строчке им нужно задать display:inline-block

1. Добавьте отступ справа у элемента с классомgallery__item – 10px

1. Задайте стили для списка (элемент с классомgallery):

Минимальная высота - 400px
Цвет блока - #d4cdad

Чтобы расположить элементы на одной строке – мы сделали элементы строчно-блочными. Браузер воспринимает такие элементы как буквы. Поэтому для выравнивания элементов по центу блока можно применить свойство, которое выравнивает текст по центру (text-align). Свойство нужно установить у родительского блока (в нашем случаи у элемента ul)

1. Выровняйте картинки по центру блока.

1. Покажите работу преподавателю.

ЗАДАНИЕ 3 (ОЦЕНКА 5)

1. Ниже списка (элемент ul) добавьте элемент div с классом info

2. Установите цвет фона для блока - #f4a460

3. Внутри элемента с классом info создайте два элемента div. Первый с классом info__avatar а второй с классом info__text

4. Для аватара задайте следующие параметры:

5. Ширина и высота блока – 250px

6. Скругление углов блока – 50%

7. Не забудьте «обрезать» все что выходит за пределы блока

8. Внутри блока info__avatar добавьте картинку screenshot_31.jpg и задайте ей класс info__img

9. Для картинки установите высоту 100% от высоты блока.

10. Заполните блок с классом info__text рыбным текстом.

11. Для блока с классом info__text задайте ширину 500px

12. Расположите блоки с классами info__avatar и info__text в одной строке.

2. Выровняйте элементы блока с классом infопогоризонтали по центру

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/537383-prakticheskaja-rabota-blochnaja-model