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

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

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

Иногда внутри переключателя используют спаны, например, для «многоточий». Также переключатели иногда верстают списками.

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

Обратите внимание, что мы задаём не ширину, а минимальную ширину min-width, т.к. номера страниц могут быть длинными: 1 и 1000. Благодаря сочетанию паддингов и минимальной ширины, номер страницы будет всегда смотреться хорошо.

Что повторить:
  1. Внутренние отступы

Выполнить задание
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="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; padding: 10px; margin: 30px auto; white-space: nowrap; background: #ecf0f1; } .paginator a, .paginator span { }
HTML Academy

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

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

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

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

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

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