diff options
Diffstat (limited to 'files/ru/learn/css/css_layout/introduction/index.html')
| -rw-r--r-- | files/ru/learn/css/css_layout/introduction/index.html | 78 |
1 files changed, 39 insertions, 39 deletions
diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index e8da5eafd9..2fbf873cce 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -41,7 +41,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:</p> -<pre class="brush: html notranslate"><p>I love my cat.</p> +<pre class="brush: html"><p>I love my cat.</p> <ul> <li>Buy cat food</li> @@ -95,7 +95,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_1">Flexbox Example 1</h6> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -105,12 +105,12 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -128,7 +128,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_2">Flexbox Example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -138,7 +138,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } @@ -147,7 +147,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -171,7 +171,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_1">Grid example 1</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -181,7 +181,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -189,7 +189,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -208,7 +208,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_2">Grid example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -218,7 +218,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -241,7 +241,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -276,7 +276,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Floats_example">Floats example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -296,7 +296,7 @@ p { </pre> </div> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -304,7 +304,7 @@ p { </pre> -<pre class="brush: css notranslate"> +<pre class="brush: css"> .box { float: left; width: 150px; @@ -340,7 +340,7 @@ p { <p>Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Positioning</h1> +<pre class="brush: html"><h1>Positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">I am a basic block level element.</p> @@ -348,7 +348,7 @@ p { <p>Этот HTML по умолчанию будет стилизован, используя следующий CSS:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -370,7 +370,7 @@ p { <p>Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; top: 30px; left: 30px; @@ -384,13 +384,13 @@ p { <div class="hidden"> <h6 id="Relative_positioning_example">Relative positioning example</h6> -<pre class="brush: html notranslate"><h1>Relative positioning</h1> +<pre class="brush: html"><h1>Relative positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my relatively positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -405,7 +405,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -422,7 +422,7 @@ p { <p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; top: 30px; left: 30px; @@ -434,13 +434,13 @@ p { <div class="hidden"> <h6 id="Absolute_positioning_example">Absolute positioning example</h6> -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +<pre class="brush: html"><h1>Absolute positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my absolutely positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -455,7 +455,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -474,7 +474,7 @@ p { <p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -487,7 +487,7 @@ p { <div class="hidden"> <h6 id="Fixed_positioning_example">Fixed positioning example</h6> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -499,7 +499,7 @@ p { </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -513,7 +513,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: fixed; top: 30px; left: 30px; @@ -530,7 +530,7 @@ p { <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html"><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -540,7 +540,7 @@ p { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -554,7 +554,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; @@ -577,7 +577,7 @@ p { <p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей вёрстки.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>First of all, tell us your name and age.</p> <div> <label for="fname">First name:</label> @@ -597,7 +597,7 @@ p { <p>Вы заметите, что параграфу с описанием дано <code>display: table-caption;</code> — что заставляет его вести себя как табличный {{htmlelement("caption")}} — а <code>caption-side: bottom;</code> для того чтобы указать описанию располагаться снизу таблицы в целях дизайна, не смотря на то что разметка находится до <code><input></code> элементов в источнике. Это обеспечивает гибкостью.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -647,7 +647,7 @@ form p { <p>В примере ниже мы начинаем с HTML блоком, который содержится в элементе <code><div></code> с классом <code>container</code>.</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Multi-column layout</h1> <p>Paragraph 1.</p> @@ -662,7 +662,7 @@ form p { <div class="hidden"> <h6 id="Multicol_example">Multicol example</h6> -<pre class="brush: html notranslate"> <div class="container"> +<pre class="brush: html"> <div class="container"> <h1>Multi-column Layout</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -673,10 +673,10 @@ form p { </div> </pre> -<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> </div> -<pre class="brush: css notranslate"> .container { +<pre class="brush: css"> .container { column-width: 200px; }</pre> </div> |