From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../learn/css/css_layout/floats_skills/index.html | 76 ++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 files/ru/learn/css/css_layout/floats_skills/index.html (limited to 'files/ru/learn/css/css_layout/floats_skills/index.html') diff --git a/files/ru/learn/css/css_layout/floats_skills/index.html b/files/ru/learn/css/css_layout/floats_skills/index.html new file mode 100644 index 0000000000..425e8c3b50 --- /dev/null +++ b/files/ru/learn/css/css_layout/floats_skills/index.html @@ -0,0 +1,76 @@ +--- +title: 'Проверка ваших навыков: floats' +slug: Learn/CSS/CSS_layout/Floats_skills +translation_of: Learn/CSS/CSS_layout/Floats_skills +--- +
{{LearnSidebar}}
+ +
+ +

Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке Floats. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.

+ +
+

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.

+ +

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка или дальнейшая помощь")}} в конце страницы

+
+ +

Floats Раз

+ +

В этом задании вам необходимо чтобы два элемента с классами float1 и float2 обтекали слева и справа соответственно. Текст должен появляться между двумя блоками как на изображении ниже.

+ +

Two blocks displaying left and right of some text.

+ +

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 700)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Float Два

+ +

В этом примере элемент с классом float должен примыкать к левому краю и обтекаться справа. Далее мы хотим чтобы первая строка текста отображалась рядом с тем элементом, а следующая строка (с классом .below) отображалась под ним. Вы можете посмотреть желаемый результат на этом изображении.

+ +

A box displayed to the left of a line of text, with some more text below.

+ +

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Float Три

+ +

И наконец у нас есть обтекаемый элемент в этом примере. Блок оборачивающий обтекаемый элемент и текст отображается за ними. Используйте самый последний доступный метод чтобы фон тянулся за обтеканием как показано на изображении.

+ +

A block displayed to the right of some text both wrapped by a box with a background color.

+ +

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Оценка или дальнейшая помощь

+ +

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

+ +

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

+ +
    +
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. +
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: +
      +
    • Описательный заголовок такой как "Требуется оценка теста по навыкам Float".
      • +
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • +
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • +
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • +
    +
    3. +
-- cgit v1.2.3-54-g00ecf