HTML Academy
Предыдущее задание
Мастерская: создаём меню9/28
Вернуться в список заданий
  1. 1. Создаём вертикальное меню
  2. 2. Добавляем ссылки
  3. 3. Сбрасываем стили списка
  4. 4. Оформляем контейнер меню
  5. 5. Оформляем пункты, простой вариант
  6. 6. Более сложное оформление пунктов
  7. 7. Добавляем разделители
  8. 8. Оформляем состояния пунктов
  9. 9. Испытание: вертикальное меню
  10. 10. Многоуровневое вертикальное меню
  11. 11. Устраняем проблемы оформления
  12. 12. Переносим рамки, задаём отступы подменю
  13. 13. Оформляем пункты подменю
  14. 14. Тестируем на большой вложенности
  15. 15. Испытание: многоуровневое меню
  16. 16. Горизонтальное меню
  17. 17. Что делать, если пункты не влезают?
  18. 18. Усложнённое оформление пунктов
  19. 19. Завершаем оформление пунктов
  20. 20. Испытание: горизонтальное меню
  21. 21. Вертикальное меню с выпадающим подменю
  22. 22. Позиционируем выпадающее подменю
  23. 23. Отображаем подменю при наведении
  24. 24. Горизонтальное меню с выпадающим подменю
  25. 25. Оформляем выпадающее меню
  26. 26. Включаем механизм выпадания
  27. 27. Состояние «открытое подменю»
  28. 28. Испытание: выпадающее меню
Следующее задание
  • Регистрация
  • Войти

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения. Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью соцсетей.

или

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Войти и продолжить
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Испытание: вертикальное меню</title> <link rel="stylesheet" href="style.css"> </head> <body> Курсы Интенсивы Профессия Подписка Профиль </body> </html>
CSS
html, body { margin: 0; padding: 0; } body { width: 280px; min-height: 280px; padding: 10px; font-size: 14px; line-height: 1.4; font-family: "Arial", sans-serif; background-color: #ecf0f1; }

Что в задании вам не понравилось?

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
  • Образец
  • Результат
  • Наложение
  • Различия
  • ?

Нажмите кнопку «Сравнить», чтобы отправить ваше решение на проверку.

Не удалось загрузить образец. Попробуйте позже.

Образец — интерфейс, который вам нужно получить.

Результат — то, как видит ваш код наш сервер. Может отличаться от того, что в мини-браузере. Сравнение происходит между этим результатом и образцом.

Наложение — полупрозрачный результат отображается над образцом.

Различия — карта различий между образцом и результатом.

0
    Выполнено 0%.
    Код был изменён
    Логотип HTML Academy
    • Наша группа в ВК
    • Наша группа в Facebook
    • Наша страница в Twitter
    • Наша страница в Instagram

    Консультация по телефону 8 800 555-86-28.

    Инновационный центр Сколково

    Курсы

    • Интерактивные курсы
    • Подписка
    • Учебник по PHP

    Профессии

    • Фронтенд-разработчик
    • React-разработчик
    Интенсивы
    • HTML и CSS,
      уровень 1
    • HTML и CSS,
      уровень 2
    • JavaScript,
      уровень 1
    • JavaScript,
      уровень 2
    • JavaScript,
      уровень 3
    • PHP, уровень 1
    • PHP, уровень 2
    Блог
    • Полезные статьи
    • HTML Шорты
    • Карьера выпускников
    • Обучение у нас

    Информация

    • Об Академии
    • Вакансии
    • О центре карьеры
    • База выпускников

    Услуги

    • Для выпускников
    • Работа наставником
    • Для учителей
    • Акселератор

    Остальное

    • Написать нам
    • Мероприятия
    • Форум

    СоглашениеКонфиденциальностьСведения об образовательной организацииЛицензия № 3026Инновационный центр Сколково© ООО «Интерактивные обучающие технологии», 2013−2019