1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
---
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>
|
