---
title: Фундаментальное понимание раскладки
slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
tags:
  - CSS
  - Начинающий
  - Обучение
  - Раскладка
translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
---
<div>{{LearnSidebar}}</div>

<p class="summary">Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимое условие:</th>
   <td>Прежде чем приступать к этой аттестации, вы должны были уже проработать все статьи в этом модуле.</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Проверить понимание фундаментальных навыков раскладки, освещаемых в этом модуле.</td>
  </tr>
 </tbody>
</table>

<h2 id="Резюме_проекта">Резюме проекта</h2>

<p>Вам предоставили некоторый html, базовый css и изображения — ваша задача, создать раскладку для дизайна, который должен выглядеть как на изображении ниже.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>

<h3 id="Базовые_настройки">Базовые настройки</h3>

<p>Вы можете скачать HTML, CSS, и набор из шести изображений <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">тут</a>.</p>

<p>Сохраните HTML документ и css стили внутри директории на вашем компьютере и добавьте изображения внутрь папки с именем <code>images</code>. Открыв <code>index.html</code> файл в браузере, вы должны получить страницу с базовой стилизацией, но без раскладки, что должно выглядеть как на изображении ниже.</p>

<p>Эта отправная точка и всё содержимое отображается браузером в нормальном потоке.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>

<h3 id="Ваши_задачи">Ваши задачи</h3>

<p>Теперь вам нужно реализовать раскладку. Задачи, которые вам необходимо выполнить:</p>

<ol>
 <li>Отобразить пункты навигации в строку, с одинаковым количеством пространства между элементами.</li>
 <li>Панель навигации должна прокручиваться вместе с содержимым страницы и закрепляться вверху видимой области документа в рамках экрана.</li>
 <li>Изображение, которое находится внутри статьи, должно обтекаться текстом вокруг него.</li>
 <li>{{htmlelement("article")}} и {{htmlelement("aside")}} элементы должны отображаться как двухколоночная раскладка. Колонки должны иметь гибкий размер, если окно браузера уменьшится, колонки должны стать более узкими.</li>
 <li>Фотографии должны отображаться как двухколоночная сетка с отступом в 1px между изображениями.</li>
</ol>

<p>Вам нет необходимости изменять HTML для создания этой раскладки и техник, которые вы должны использовать:</p>

<ul>
 <li>Позиционирование</li>
 <li>Раскладка на Float</li>
 <li>Раскладка на Flexbox</li>
 <li>Раскладка на CSS Grid</li>
</ul>

<p>Есть множество способов, как выполнить некоторые из этих задач и часто не существует одного правильного или неправильного способа это сделать. Попробуйте несколько разных способов и увидите, какой работает лучше. Делайте заметки о ваших экспериментах и вы всегда сможете обсудить ваш способ в отдельной дискуссии для этого задания или на <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC канале.</p>

<h2 id="Оценка_работы">Оценка работы</h2>

<p>Если вы проходите эту аттестацию как часть организованного курса, вы должны быть в состоянии дать свою работу вашему учителю/наставнику для оценки. Если вы занимаетесь самообучением, тогда вы легко можете получить руководство по оценке работы, задавая вопросы в <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982">отдельной дискуссии для этого задания</a> или на <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC канале в <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте выполнить упражнение — нет никаких причин для жульничества!</p>