aboutsummaryrefslogtreecommitdiff
path: root/files/ru/learn/css/css_layout/practical_positioning_examples/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ru/learn/css/css_layout/practical_positioning_examples/index.html')
-rw-r--r--files/ru/learn/css/css_layout/practical_positioning_examples/index.html8
1 files changed, 4 insertions, 4 deletions
diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html
index 2f5c145b3c..0e526bfc31 100644
--- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html
+++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div>
-<p class="summary">Основы позиционирования, приведенные в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p>
+<p class="summary">Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p>
<table class="learn-box standard-table">
<tbody>
@@ -24,7 +24,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
<h2 id="Информационный_блок_с_вкладками">Информационный блок с вкладками</h2>
-<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространенная функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p>
+<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространённая функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
@@ -35,7 +35,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
<p>Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность.</p>
<div class="note">
-<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются еще более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p>
+<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p>
</div>
<p>Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле:</p>
@@ -101,7 +101,7 @@ body {
margin: 0 auto;
}</pre>
-<p>Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p>
+<p>Это задаёт конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p>
<h3 id="Укладка_наших_вкладок">Укладка наших вкладок</h3>