HTML Academy
Предыдущее задание
Знакомство с CSS15/15
Вернуться в список заданий
  1. 1. Введение в CSS
  2. 2. CSS-правила
  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. Испытание: макет-прототип
Список заданий
Оформить подписку
  • Регистрация
  • Войти

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

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

  • ФБ
или

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

Войти и продолжить
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание: макет-прототип</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <div class="logo">Лого</div> <div class="contacts">+7 (812) 33-4-55</div> </div> <div class="about-us"> <h1>Наша компания</h1> <p>Предлагает самые лучшие услуги по вёрстке HTML-страниц.</p> <p>Мы используем HTML5 и CSS3, создаём адаптивную вёрстку, применяем Progressive Enhancement.</p> </div> <div class="main-menu"> <a href="#about">О нас</a> <br> <a href="#contacts">Вакансии</a> <br> <a href="#contacts">Контакты</a> <br> </div> <div class="footer"> © 2015 — Keksby Web Production </div> </body> </html>
CSS
/* Общие стили для документа и блоков, менять не надо */ body { width: 450px; margin: 0; padding: 10px; font-size: 14px; font-family: "Arial", sans-serif; } .logo, .contacts, .about-us, .main-menu, .footer { padding: 10px 20px 10px 20px; background-color: #f5f5f5; border: 2px solid #cccccc; } /* Собственные стили блоков */ .header { min-height: 40px; margin-bottom: 20px; } .logo { float: left; width: 100px; text-align: center; } .contacts { float: right; width: 110px; text-align: center; } .about-us { width: 200px; margin-bottom: 10px; } .about-us h1 { } .about-us p { font-size: 12px; } .main-menu { width: 50px; } .footer { }

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

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

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

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

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

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

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

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

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

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

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

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

0
    Выполнено 0%.
    Код был изменён
    Логотип HTML Academy
    • Наша группа в VK
    • Наш канал на YouTube
    • Наша страница в Twitter
    • Наш канал в Telegram
    Инновационный центр Сколково

    Практикум

    • Курсы для новичков
    • Подписка

    Профессии

    • Фронтенд-разработчик
    • JavaScript-разработчик
    • Фулстек-разработчик
    Курсы
    • HTML и CSS.
      Профессиональная вёрстка сайтов
    • HTML и CSS.
      Адаптивная вёрстка и автоматизация
    • JavaScript.
      Профессиональная разработка веб-интерфейсов
    • JavaScript.
      Архитектура клиентских приложений
    • React.
      Разработка сложных клиентских приложений
    • Node.js.
      Профессиональная разработка REST API
    • Node.js и Nest.js.
      Микросервисная архитектура
    • TypeScript. Теория типов
    • Алгоритмы и структуры данных
    • Паттерны проектирования
    • Webpack
    • Vite
    • Vue.js 3. Разработка клиентских приложений
    • Git и GitHub
    • Анимация для фронтендеров
    Журнал
    • Справочник по HTML
    • Учебник по Git
    • Учебник по PHP

    Информация

    • Об Академии
    • О центре карьеры

    Услуги

    • Работа наставником
    • Для вузов и колледжей
    • Для учителей

    Остальное

    • Написать нам
    • Мероприятия
    • Форум
    • Акции
    • Отзывы о курсах

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