Сетки / Последняя сетка завершена [26/32]
×
Курс «Сетки»

Последняя сетка завершена [26/32]

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

Контент уже добавлен и скрыт. Снова отобразите его, а также уберите вспомогательные рамки и фоны.

Приём с дополнительными блоками, которые позиционируют содержание, чтобы родительские блоки могли тянуться на всю ширину окна, достаточно распространён. Дизайн с подобными сетками тоже встречается очень часто.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Последняя сетка завершена</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="header"> <div class="layout-positioner"> <div class="layout-column-1 layout-column"> <div class="logo hidden"> <img width="140" src="/themes/htmlacademy/img/logo.png"> <p>Научитесь создавать современные веб-интерфейсы, оттачивайте своё мастерство, станьте настоящим профессионалом.</p> </div> </div> <div class="layout-column-2 layout-column"> <ul class="menu hidden"> <li>Курсы</li> <li>Интенсив</li> </ul> </div> </div> </div> <div class="features"> <div class="layout-positioner"> <div class="layout-column"> <div class="feature hidden"> Вы научитесь создавать современные веб-интерфейсы, работать с живым кодом, использовать новейшие технологии. </div> </div> <div class="layout-column"> <div class="feature hidden"> Минимум скучной теории и максимум практических упражнений, решение реальных задач и настоящие испытания. </div> </div> <div class="layout-column"> <div class="feature hidden"> Интересные, наглядные и затягивающие курсы, интерактивные интерфейсы, достижения — всё для обучения с удовольствием. </div> </div> </div> </div> <div class="footer"> <div class="layout-positioner"> <div class="footer-logo hidden"> <img width="140" src="/themes/htmlacademy/img/logo.png"> </div> </div> </div> </body> </html>
CSS
body { min-width: 500px; margin: 0; padding: 0; font-family: "PT Sans", sans-serif; font-size: 14px; } .clearfix::after { display: table; content: ""; clear: both; } .layout-positioner { width: 430px; margin: 0 auto; border: 2px dashed #3498db; } .layout-positioner::after { display: table; content: ""; clear: both; } .header { margin-bottom: 10px; color: white; background: #34495e; } .header .layout-column { min-height: 50px; background: rgba(192, 57, 43, 0.9); } .header .layout-column-1 { float: left; width: 280px; } .header .layout-column-2 { float: right; width: 130px; } .features { margin-bottom: 10px; } .features .layout-column { float: left; margin-right: 20px; width: 130px; min-height: 100px; background: rgba(236, 240, 241, 0.9); } .features .layout-column:last-child { margin-right: 0; } .footer { min-height: 50px; color: white; background: #34495e; } /* Стили содержания */ .hidden { display: none; } .logo { padding: 10px; } .logo p { margin: 0; } .menu { margin: 0; padding: 10px; list-style: none; } .menu li { margin-bottom: 5px; padding: 5px; text-align: center; background: #2c3e50; border-radius: 5px; } .feature { padding: 10px; text-align: center; } .footer-logo { padding: 10px; }
HTML Academy
  1. У класса .hidden измените значение display на block.
  2. Удалите рамки у .layout-positioner.
  3. Удалите фон у колонок в хедере.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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