Знакомство с CSS / Испытание: макет-прототип [15/15]

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

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

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

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

×

Испытание: макет-прототип [15/15]

В этом испытании вам нужно привести в порядок простой прототип макета. Код HTML-редактора заблокирован, поэтому вам придётся использовать только стили.

Чтобы исправить макет, нужно добавить недостающие свойства, а некоторые исправить. Все свойства, которые «испорчены» или «потеряны» в прототипе, вы использовали в этом курсе:

  • ширина и внешние отступы,
  • цвета фона и текста,
  • начертание и толщина шрифта,
  • построение сеток.

Подсказки:

  • Использованные цвета: #ffffff и #333333.
  • Для одного элемента нужно будет изменить размер шрифта, для этого используйте свойство font-size.
  • Значения отступов, ширины блоков, а также неизвестных размеров шрифта кратны 10,
  • Свойства для позиционирования position, top, left и другие не использовались.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание: макет-прототип</title> </head> <body> <div class="header"> <div class="logo">Лого</div> <div class="contacts">+7 (812) 33-4-55</div> </div> <div class="about-us"> <h1>Наша компания</h1> <p>Предлагает самые лучшие услуги по вёрстке HTML-страниц.</p> <p>Мы используем HTML5 и CSS3, создаём адаптивную вёрстку, применяем Progressive Enhancement.</p> </div> <div class="main-menu"> <a href="#about">О нас</a><br> <a href="#contacts">Вакансии</a><br> <a href="#contacts">Контакты</a><br> </div> <div class="footer"> &copy; 2015 — Keksby Web Production </div> </body> </html>
CSS
/* Общие стили для документа и блоков, менять не надо */ body { width: 450px; margin: 0; padding: 10px; font-family: Arial, sans-serif; font-size: 14px; } .logo, .contacts, .about-us, .main-menu, .footer { padding: 10px 20px 10px 20px; background-color: #f5f5f5; border: 2px solid #cccccc; } /* Собственные стили блоков */ .header { min-height: 40px; margin-bottom: 20px; } .logo { float: left; width: 100px; text-align: center; } .contacts { float: right; width: 110px; text-align: center; } .about-us { width: 200px; margin-bottom: 10px; } .about-us h1 { } .about-us p { font-size: 12px; } .main-menu { width: 50px; } .footer { }
<HTML Academy>
?

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

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

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

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