Мастерская: создаём меню / Горизонтальное меню [16/28]
×

Горизонтальное меню [16/28]

Теперь из того же самого списка создадим горизонтальное меню.

Начнем с этапа, когда HTML-код уже размечен и заданы стили для контейнера. Теперь нужно преобразовать вертикальный список в горизонтальное меню.

Простейший способ сделать это — задать элементам списка строчный тип. Тогда они автоматически расположатся в одну строку. Также добавим им небольшой отступ справа.

Кстати, мы не задали ширину контейнеру, т.к. обычно горизонтальные меню занимают всю ширину макета.

Хотите писать JavaScript, используя современный синтаксис (ES2015, ES2016, ES2017)? Уметь тестировать свои программы? Записывайтесь на продвинутый интенсив по JavaScript.

Выполнить задание
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 { margin: 0; padding: 10px 15px; list-style: none; background: #f5f5f5; border: 1px solid #e5e5e5; } .main-menu li { } .main-menu a { color: #0088cc; }
HTML Academy
  1. Сделайте элементы списка строчными.
  2. Добавьте элементам списка отступ справа 5px.
Теория Проверить Следующее задание
Идёт запись на курс JavaScript, уровень 2 #6, который стартует 6 августа.

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

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

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

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