Мастерская: создаём меню / Оформляем пункты, простой вариант [5/28]
×

Оформляем пункты, простой вариант [5/28]

Простейший способ оформить пункты меню — добавить между ними отступы и задать стили ссылок.

Хорошим тоном считается задавать стили ссылок для всех состояний: по умолчанию, посещенная, при наведении и щелчке. Но для этого дизайнер должен продумать и отрисовать все состояния ссылок.

Мы пойдем простейшим путем и зададим одинаковый цвет ссылок для всех состояний (всё-таки мы только тренируемся).

Обратите внимание на способ написания селекторов. Мы используем контекстные селекторы. Перед каждым CSS-правилом, относящимся к меню, мы пишем класс меню. Такой способ называется созданием пространства имен. Он позволяет эффективно отделять друг от друга стили, относящиеся к разным блокам.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Оформляем пункты, первый вариант</title> </head> <body> <ul class="main-menu"> <li><a href="#company">О компании</a></li> <li><a href="#services">Услуги</a></li> <li><a href="#team">Сотрудники</a></li> <li><a href="#contacts">Контакты</a></li> </ul> </body> </html>
CSS
body { padding: 10px; font-family: "Arial", sans-serif; font-size: 14px; line-height: 1.4; } .main-menu { width: 150px; margin: 0; padding: 10px 15px; list-style: none; background: #f5f5f5; border: 1px solid #e5e5e5; } /* Обратите внимание на селектор. */ /* Все селекторы для меню предваряются классом меню. */ .main-menu li { } .main-menu a { }
HTML Academy
  1. Задайте элементам списка внешний отступ снизу 8px.
  2. Задайте ссылкам цвет #0088cc.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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