Мастерская: декоративные элементы / Социальные кнопки, шаг 2 [2/18]
×

Социальные кнопки, шаг 2 [2/18]

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

Затем зададим фон и посмотрим, как ведут себя кнопки и подпись. Для того, чтобы красиво выровнять подпись «Соцсети» и кнопки, зададим вертикальное выравнивание по середине.

На этом этапе мы задаем общие стили кнопок, поэтому записываем их в CSS-правило для класса social.

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Социальные кнопки, шаг 2</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="share"> <b>Соцсети</b> <a class="social social-vk" href="http://vk.com/htmlacademy"></a> <a class="social social-fb" href="http://www.facebook.com/htmlacademy"></a> <a class="social social-tw" href="http://twitter.com/htmlacademy_ru"></a> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; font-size: 14px; } .share { width: 270px; margin: 0 auto; margin-top: 120px; padding: 10px; padding-left: 20px; background: #ecf0f1; } .share b { margin-right: 15px; font-weight: normal; text-transform: uppercase; color: #7f8c8d; } .social { }
HTML Academy

Задайте для класса .social:

  1. блочно-строчный тип элемента,
  2. ширину и высоту 40px,
  3. цвет фона #bdc3c7,
  4. внешний отступ справа 10px,
  5. вертикальное выравнивание middle.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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