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

Переключатель страниц, тестирование [8/18]

Теперь оттестируем наш переключатель в разных состояниях.

У нас есть три переключателя, у которых разные текущие страницы. Ваша задача заключается в том, чтобы правильно задать элементам переключателей те классы, которые мы добавляли в прошлом задании.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Переключатель страниц, тестирование</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:700&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="paginator"> <a class="prev" href="#prev">Назад</a> <a href="#1">1</a> <span>&hellip;</span> <a href="#100">100</a> <a class="next" href="#next">Вперёд</a> </div> <div class="paginator"> <a class="prev" href="#prev">Назад</a> <a href="#53">53</a> <span>&hellip;</span> <a href="#100">100</a> <a class="next" href="#next">Вперёд</a> </div> <div class="paginator"> <a class="prev" href="#prev">Назад</a> <a href="#97">97</a> <span>&hellip;</span> <a href="#100">100</a> <a class="next" 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; line-height: 40px; text-align: center; vertical-align: middle; text-decoration: none; font-weight: bold; color: white; background: #95a5a6; } .paginator .prev { margin-right: 20px; text-indent: -1000px; background-image: url("/assets/course14/arrows.png"); background-repeat: no-repeat; background-position: 0 0; } .paginator .next { margin-left: 20px; text-indent: -1000px; background-image: url("/assets/course14/arrows.png"); background-repeat: no-repeat; background-position: 0 -40px; } .paginator .current { background-color: #16a085; } .paginator .disabled { opacity: 0.3; } .paginator a:hover { background-color: #2ecc71; }
HTML Academy

Задайте правильные состояния элементам переключателей, если:

  1. Текущая страница первого переключателя — 1.
  2. Текущая страница второго переключателя — 53.
  3. Текущая страница третьего переключателя — 100.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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