Сетки / Сетка посложнее, добавляем содержание [23/32]
×
Курс «Сетки»

Сетка посложнее, добавляем содержание [23/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="wrapper"> <div class="header clearfix"> <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 class="features clearfix"> <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 class="footer clearfix"> <div class="footer-logo hidden"> <img width="140" src="/themes/htmlacademy/img/logo.png"> </div> </div> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; font-size: 14px; } .wrapper { width: 430px; margin: 0 auto; box-shadow: 0 0 2px #cccccc; } .clearfix::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); border-bottom: 2px dashed #95a5a6; } .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; width: 130px; min-height: 100px; margin-right: 20px; background: rgba(236, 240, 241, 0.9); border-bottom: 2px dashed #95a5a6; } .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. Удалите рамки у всех колонок.
  3. Удалите фон у колонок в хедере.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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