Блочная модель документа / Первое испытание [8/23]

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×

Первое испытание [8/23]

Используйте изученные свойства блочной модели для прохождения испытания, а именно:

  • ширину и высоту;
  • отступы;
  • рамки.

Ничего кроме размеров блоков, отступов и рамок менять не надо.

Подобрать правильные размеры вам поможет сетка на фоне. Размеры маленькой ячейки 20 на 20 пикселей, большой ячейки 100 на 100 пикселей.

Внутренние отступы, в отличие от заданий, здесь непрозрачные.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Первое испытание</title> </head> <body> <div class="block block1">Блок 1</div> <div class="block block2">Блок 2</div> <div class="block block3">Блок 3</div> </body> </html>
CSS
/* Базовые стили, изменять не нужно */ html, body { margin: 0; padding: 0; } body { width: 540px; min-height: 290px; padding-top: 20px; padding-left: 20px; font-size: 14px; line-height: 1.5; font-family: Arial, sans-serif; color: white; background-color: #3a78a1; background-image: url("/assets/course9/grid.png"); background-repeat: repeat; background-position: -80px -80px; } .block { background: rgba(0, 255, 255, 0.2); border: 2px solid white; }
<HTML Academy>
?

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.