Мастерская: декоративные элементы / Комментарии, шаг 1 [13/18]
×

Комментарии, шаг 1 [13/18]

В последней серии заданий мы сверстаем список комментариев.

Кстати, обратите внимание на CSS. В предыдущих заданиях мы создавали пространства имён классов в CSS с помощью контекстных селекторов. Например:

.contacts .title {}
.contacts .item {}

О пространствах имен уже говорилось в курсе про меню.

В этой серии заданий мы будем использовать другой способ создания пространства имён. Он заключается в том, что мы будем добавлять к названию каждого класса префикс, например:

.comment-avatar {}
.contacts-title {}

Оба способа хороши и используются в зависимости от предпочтений. Самое главное — использовать пространства имён.

В этом задании мы начнём оформлять блоки аватара и автора комментария.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Комментарии, шаг 1</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="comment"> <div class="comment-avatar"></div> <div class="comment-author">Дима Дивов</div> <div class="comment-text"> Неплохой курс. Нравится собирать и применять теорию на практике. <div class="comment-date">16.09.2013</div> </div> <a href="#reply" title="Ответить" class="comment-reply"></a> </div> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; font-size: 14px; color: #777777; } .comment { position: relative; margin-left: 50px; margin-top: 90px; margin-right: 20px; } .comment-avatar { } .comment-author { }
HTML Academy
  1. Задайте для .comment-avatar ширину и высоту 70px.
  2. Задайте для .comment-avatar цвет фона #7f8c8c, фоновое изображение /assets/course14/avatar.png без повторения, расположение фона 50% 50%.
  3. Задайте для .comment-author размер шрифта 16px, полужирное начертание, а также маргин снизу 5px.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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