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

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

Займемся переключателями «вперед» и «назад». Пока что мы используем текстовые надписи. Но мы их спрячем и заменим на стрелочки.

Первым делом добавим к переключателям классы prev и next. Чтобы спрятать текст, используем свойство text-indent с большим отрицательным значением.

Затем отделим переключатели от номеров страниц с помощью отступов и с помощью уже знакомой техники спрайтов добавим на фон стрелочки. Вот спрайт на тёмном фоне:


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Переключатель страниц, шаг 3</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; line-height: 40px; text-align: center; vertical-align: middle; font-weight: bold; text-decoration: none; color: white; background: #95a5a6; } .paginator .prev { } .paginator .next { }
HTML Academy
  1. Добавьте первой ссылке класс prev, последней – класс next.
  2. Для обоих классов задайте text-indent: -1000px;.
  3. Внешний отступ размером 20px справа для .prev и слева для .next.
  4. Для обоих классов задайте неповторяющийся фон /assets/course14/arrows.png.
  5. Положение фона 0 0 для .prev и 0 -40px для .next.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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