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

Переключатель страниц, шаг 2 [5/18]

Теперь оформим текст переключателей.

Сначала зададим горизонтальное выравнивание по центру. Затем зададим вертикальное выравнивание по середине. Чтобы был виден эффект вертикального выравнивания, нужно задать высоту строки такую же, как высота элемента, т.е. 40px.

Затем зададим цвет ссылок, уберем подчеркивание и сделаем шрифт полужирным.

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Переключатель страниц, шаг 2</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="paginator"> <a href="#prev">Назад</a> <a href="#1">1</a> <span>&hellip;</span> <a href="#3">3</a> <a href="#next">Вперёд</a> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-size: 16px; font-family: "PT Sans", sans-serif; } .paginator { width: 280px; margin: 30px auto; padding: 10px; white-space: nowrap; background: #ecf0f1; } .paginator a, .paginator span { display: inline-block; min-width: 20px; height: 40px; padding: 0 10px; background: #95a5a6; }
HTML Academy

Задайте ссылкам и спанам внутри блока .paginator:

  1. вертикальное и горизонтальное выравнивание по центру,
  2. высоту строки 40px,
  3. белый цвет текста,
  4. уберите подчеркивание,
  5. полужирное начертание.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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