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
70
71
72
73
74
75
76
77
78
79
|
---
title: 'Проверь свои навыки: Multicol'
slug: Learn/CSS/CSS_layout/Multicol_skills
translation_of: Learn/CSS/CSS_layout/Multicol_skills
original_slug: Learn/CSS/CSS_layout/Навыки_Multicol
---
<div>{{LearnSidebar}}</div>
<div></div>
<p>Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы будете работать над тремя небольшими задачами,</span></span> использующими различные элементы из пройденного материала.</p>
<div class="blockIndicator note">
<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Вы можете опробовать решения в интерактивных редакторах ниже</span></span>, однако может быть полезным загрузить код и использовать онлайн инструменты такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
<p>Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы.</p>
</div>
<h2 id="Multicol_Раз">Multicol Раз</h2>
<p>В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.</p>
<p><img alt="Three columns of text" src="https://mdn.mozillademos.org/files/17081/multicol-task1.png" style="height: 722px; width: 1226px;"></p>
<p>Попробуйте обновить живой пример ниже для воссоздания законченного примера:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}</p>
<div class="blockIndicator note">
<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
</div>
<h2 id="Multicol_Два">Multicol Два</h2>
<p>Создайте столбцы с минимальной шириной 200px.</p>
<p>Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.</p>
<p><img alt="Three columns of text with a grey rule between them." src="https://mdn.mozillademos.org/files/17082/multicol-task2.png" style="height: 668px; width: 1222px;"></p>
<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}</p>
<div class="blockIndicator note">
<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol2-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
</div>
<h2 id="Multicol_Три">Multicol Три</h2>
<p>Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке</p>
<p><img alt="Three columns of text with a heading and subheading spanning all three in the middle." src="https://mdn.mozillademos.org/files/17083/multicol-task3.png" style="height: 871px; width: 1222px;"></p>
<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}</p>
<div class="blockIndicator note">
<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol3-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
</div>
<h2 id="Оценка_и_дальнейшая_помощь">Оценка и дальнейшая помощь</h2>
<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>
<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
<ol>
<li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
<li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
<ul>
<li>Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".</li>
<li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
<li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
<li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
</ul>
</li>
</ol>
|
