aboutsummaryrefslogtreecommitdiff
path: root/files/ru/learn/css/css_layout/position_skills/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ru/learn/css/css_layout/position_skills/index.html')
-rw-r--r--files/ru/learn/css/css_layout/position_skills/index.html64
1 files changed, 64 insertions, 0 deletions
diff --git a/files/ru/learn/css/css_layout/position_skills/index.html b/files/ru/learn/css/css_layout/position_skills/index.html
new file mode 100644
index 0000000000..f63a3a3a94
--- /dev/null
+++ b/files/ru/learn/css/css_layout/position_skills/index.html
@@ -0,0 +1,64 @@
+---
+title: 'Проверьте свои навыки: позиционирование'
+slug: Learn/CSS/CSS_layout/Навыки_позиционирования
+translation_of: Learn/CSS/CSS_layout/Position_skills
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</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>, или <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
+
+<p>Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы</p>
+</div>
+
+<h2 id="Позиционирование_Раз">Позиционирование Раз</h2>
+
+<p>В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.</p>
+
+<p><img alt="The green box is at the top right of a container with a grey border." src="https://mdn.mozillademos.org/files/17077/position-task1.png" style="height: 661px; width: 1033px;"></p>
+
+<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В качестве дополнительной задачи</span></span>, сможете ли вы изменить цель так чтоб она отображалась под текстом?</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе</p>
+</div>
+
+<h2 id="Позиционирование_Два">Позиционирование Два</h2>
+
+<p>В примере ниже если вы прокрутите блок <span class="tlid-translation translation" lang="ru"><span title="">боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.</span></span></p>
+
+<p><img alt="The content is scrolled but the sidebar has stayed in place." src="https://mdn.mozillademos.org/files/17078/position-task2.png" style="height: 827px; width: 1123px;"></p>
+
+<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p>ля оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-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>Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".</li>
+ <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
+ <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
+ <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
+ </ul>
+ </li>
+</ol>