From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../breadcrumb_navigation/index.html | 62 +++++++++++++++++++ files/ru/web/css/layout_cookbook/index.html | 67 +++++++++++++++++++++ .../layout_cookbook/split_navigation/index.html | 48 +++++++++++++++ .../css/layout_cookbook/sticky_footers/index.html | 70 ++++++++++++++++++++++ 4 files changed, 247 insertions(+) create mode 100644 files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/ru/web/css/layout_cookbook/index.html create mode 100644 files/ru/web/css/layout_cookbook/split_navigation/index.html create mode 100644 files/ru/web/css/layout_cookbook/sticky_footers/index.html (limited to 'files/ru/web/css/layout_cookbook') diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..f2452542a7 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,62 @@ +--- +title: Breadcrumb Navigation +slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.

+ +

Links displayed inline with separators

+ +

Требование

+ +

Элементы обычно отображаются в строке с разделителем, чтобы указать иерархию между отдельными страницами.

+ +

Пример

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

Загрузить этот пример

+
+ +
+

Примечение: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:

+ +
.breadcrumb li:not(:first-child)::before {
+  content: "→";
+}
+
+ +

Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.

+
+ +

Сделанный выбор

+ +

Этот шаблон построен с использованием простого гибкого макета, демонстрирующего, как строка CSS может дать нам нашу навигацию. Разделители добавляются с использованием содержимого, созданного CSS. Вы можете изменить их на любой разделитель, который вам нравится.

+ +

Проблемы доступности

+ +

Я использовал атрибуты aria-label и aria-current, чтобы помочь пользователям понять, что это за навигация и где в структуре находится текущая страница.
+ Смотреть связанные ссылки для получения дополнительной информации.

+ +

Совместимость с браузером

+ +

Различные методы компоновки имеют разную поддержку браузером. Смотреть диаграммы ниже для получения подробной информации о базовой поддержке используемых свойств.

+ + + +

Flexbox

+ +

{{Compat("css.properties.flex")}}

+ +

Смотреть также

+ + diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..5c53652804 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/index.html @@ -0,0 +1,67 @@ +--- +title: CSS Layout cookbook +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - Layout + - NeedsTranslation + - TopicStub + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+Книга рецептов CSS объединяет примеры большинства наиболее распространненых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.
+
+В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.
+ +

+Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.
+ +

The Recipes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecipeDescriptionLayout Methods
Media ObjectsA two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColumnsWhen to choose multi-column layout, flexbox or grid for your columnsCSS Grid, Multicol, Flexbox
Center an elementHow to center an item horizontally and verticallyFlexbox, Box Alignment
Sticky footersCreating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split NavigationA navigation pattern where some links are visually separated from the others.Flexbox, {{cssxref("margin")}}
Breadcrumb NavigationCreating a list of links to allow the visitor to navigate back up through the page hierarchy.Flexbox
+ +

Contribute a Recipe

+ +

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.

diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html new file mode 100644 index 0000000000..5f08999af1 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html @@ -0,0 +1,48 @@ +--- +title: Раздельная навигация +slug: Web/CSS/Layout_cookbook/Split_Navigation +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.

+ +

Items separated into two groups.

+ +

Требования

+ +

Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. 

+ +

Рецепт

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

Download this example

+
+ +

Choices made

+ +

Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.

+ +

Auto margin поглощает все доступное пространство в указанном направлении. Так же работает центрирование блока с автоматическими margin - вы имеете отступы на каждой стороне блока, пытающиеся занять все доступное пространство, таким образом толкая блок в центр.

+ +

В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.

+ +

Поддержка браузерами

+ +

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

+ + + +

Flexbox

+ +

{{Compat("css.properties.flex")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html new file mode 100644 index 0000000000..945d727438 --- /dev/null +++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html @@ -0,0 +1,70 @@ +--- +title: Sticky footers +slug: Web/CSS/Layout_cookbook/Sticky_footers +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. В этом рецепте мы рассмотрим несколько методов для создания одного из них.

+ +

A sticky footer pushed to the bottom of a box

+ +

Requirements

+ +

Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:
+  

+ + + +

The recipe

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

Download this example

+
+ +
+

Note: In this example and the following one we are using a wrapper set to min-height: 100% in order that our live example works. You could also achieve this for a full page by setting a {{cssxref("min-height")}} of 100vh on the {{htmlelement("body")}} and then using it as your grid container.

+
+ +

Выбор сделан

+ +

В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100%, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

+ +

При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку 1fr, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек 1fr будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.

+ +

Alternate method

+ +

If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

The flexbox example starts out in the same way, but we use display:flex rather than display:grid on the .wrapper; we also set flex-direction to column. Then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area.

+ +

Browser compatibility

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

Resources on MDN

+ + -- cgit v1.2.3-54-g00ecf