Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.
🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
между важными местами
Shift
между
разворотами
разворотами
ХТМЛ.
Вёрстка сайтов
Издательство Бюро Горбунова
2021
ХТМЛ.
Вёрстка сайтов
Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
П52
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
удк 004.42
ббк З973.42
П52
П52
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Скрыто 103 разворота
Любую сложную модульную вёрстку можно разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов. Скажем, классическая трёхколонная вёрстка, состоящая из шапки, статьи и двух сайдбаров, раскладывается в 4 флекс‑контейнера.
Начнём с разметки трехколоночной страницы:
<header>
<div>Логотип</div>
…
</header>
<main>
<article>
<p>…</p>
</article>
<nav>
<li>Навигация</li>
…
</nav>
<aside>
<div>Реклама</div>
…
</aside>
</main>Превратим шапку, содержимое и сайдбары во флекс‑контейнеры и раскрасим флекс‑элементы для наглядности:
header,
main,
aside,
nav {
display: flex;
}
header > *,
article > *,
aside > *,
nav > * {
min-height: 36px;
padding: 9px;
margin: 9px;
background: #e5f5ff;
}Обратите внимание: по умолчанию флекс‑элементы разложились в строку, flex-direction: row
Дадим странице всю доступную высоту, разложим по вертикали и растянем её содержимое:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1; /* Это заклинание заставляет <main> занять всё свободное пространство. Мы рассмотрим его чуть позже */
}
В левом сайдбаре разложим элементы сверху вниз:
nav {
flex-direction: column;
justify-content: flex-start;
}
В правом сайдбаре равномерно распределим элементы:
aside {
flex-direction: column;
justify-content: space-between;
}
И поменяем порядок элементов, чтобы колонка с навигацией была слева:
nav {
flex-direction: column;
justify-content: flex-start;
order: -1; /* И это свойство мы рассмотрим чуть позже */
}
По умолчанию флекс‑элементы занимают столько места, сколько нужно их содержимому. Поэтому колонки с навигацией и рекламой сжались.
Чтобы ширина колонок с навигацией и рекламой не зависела текста, подчиним вёрстку пятиколоночной сетке. Зададим пропорции, по которым колонки и статья делят свободное место в
nav {
flex-direction: column;
justify-content: flex-start;
order: -1;
flex-grow: 1;
flex-basis: 0;
}
aside {
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
flex-basis: 0;
}
article {
flex-grow: 3;
flex-basis: 0;
}Любую сложную модульную вёрстку можно разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов. Скажем, классическая трёхколонная вёрстка, состоящая из шапки, статьи и двух сайдбаров, раскладывается в 4 флекс‑контейнера.
Начнём с разметки трехколоночной страницы:
<header>
<div>Логотип</div>
…
</header>
<main>
<article>
<p>…</p>
</article>
<nav>
<li>Навигация</li>
…
</nav>
<aside>
<div>Реклама</div>
…
</aside>
</main>Превратим шапку, содержимое и сайдбары во флекс‑контейнеры и раскрасим флекс‑элементы для наглядности:
header,
main,
aside,
nav {
display: flex;
}
header > *,
article > *,
aside > *,
nav > * {
min-height: 36px;
padding: 9px;
margin: 9px;
background: #e5f5ff;
}Обратите внимание: по умолчанию флекс‑элементы разложились в строку, flex-direction: row
Дадим странице всю доступную высоту, разложим по вертикали и растянем её содержимое:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1; /* Это заклинание заставляет <main> занять всё свободное пространство. Мы рассмотрим его чуть позже */
}
В левом сайдбаре разложим элементы сверху вниз:
nav {
flex-direction: column;
justify-content: flex-start;
}
В правом сайдбаре равномерно распределим элементы:
aside {
flex-direction: column;
justify-content: space-between;
}
И поменяем порядок элементов, чтобы колонка с навигацией была слева:
nav {
flex-direction: column;
justify-content: flex-start;
order: -1; /* И это свойство мы рассмотрим чуть позже */
}
По умолчанию флекс‑элементы занимают столько места, сколько нужно их содержимому. Поэтому колонки с навигацией и рекламой сжались.
Чтобы ширина колонок с навигацией и рекламой не зависела текста, подчиним вёрстку пятиколоночной сетке. Зададим пропорции, по которым колонки и статья делят свободное место в
nav {
flex-direction: column;
justify-content: flex-start;
order: -1;
flex-grow: 1;
flex-basis: 0;
}
aside {
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
flex-basis: 0;
}
article {
flex-grow: 3;
flex-basis: 0;
}Упражнение: выравнивание флексбоксом
Измените ЦСС так, чтобы первый указатель повторил второй.
.plate {
Вёрстка
Дизайн
Вёрстка
Дизайн
Упражнение: выравнивание флексбоксом
Измените ЦСС так, чтобы первый указатель повторил второй.
.plate {
Перенос флекс‑элементов
По умолчанию флекс‑контейнер однострочный: невмещающиеся элементы переполняют его. Чтобы сделать его многострочным и разрешить перенос элементов, используют flex-wrap: wrap или flex-wrap: wrap-reverse
При этом flex-wrap: wrap-reverse раскладывает невмещающиеся элементы в направлении, противоположном поперечной оси: снизу вверх
По умолчанию
1
2
3
4
5
6
7
8
9
flex‑wrap: wrap
1
2
3
4
5
6
7
8
9
flex‑wrap: wrap‑reverse
1
2
3
4
5
6
7
8
9
Перенос флекс‑элементов
По умолчанию флекс‑контейнер однострочный: невмещающиеся элементы переполняют его. Чтобы сделать его многострочным и разрешить перенос элементов, используют flex-wrap: wrap или flex-wrap: wrap-reverse
При этом flex-wrap: wrap-reverse раскладывает невмещающиеся элементы в направлении, противоположном поперечной оси: снизу вверх
По умолчанию
1
2
3
4
5
6
7
8
9
flex‑wrap: wrap
1
2
3
4
5
6
7
8
9
flex‑wrap: wrap‑reverse
1
2
3
4
5
6
7
8
9
При смене направления главной оси меняется и поведение переноса: flex-wrap: wrap раскладывает невмещающиеся колонки по поперечной оси, wrap-reverse — по поперечной, но в обратном порядке.
flex‑direction: column и flex‑wrap: wrap
1
2
3
4
5
6
7
8
9
flex‑direction: column и flex‑wrap: wrap‑reverse
1
2
3
4
5
6
7
8
9
При смене направления главной оси меняется и поведение переноса: flex-wrap: wrap раскладывает невмещающиеся колонки по поперечной оси, wrap-reverse — по поперечной, но в обратном порядке.
flex‑direction: column и flex‑wrap: wrap
1
2
3
4
5
6
7
8
9
flex‑direction: column и flex‑wrap: wrap‑reverse
1
2
3
4
5
6
7
8
9
В многострочных контейнерах за выравнивание строк на поперечной оси отвечает свойство align-content
align‑content: stretch
1
2
3
4
5
6
7
8
9
По умолчанию строки растягиваются на всю поперечную ось
align‑content: space‑around
1
2
3
4
5
6
7
8
9
Строки равномерно распределены
align‑content: space‑between
1
2
3
4
5
6
7
8
9
Первая и последняя строки отжаты к краям, оставшееся место делится поровну
align‑content: flex‑start
1
2
3
4
5
6
7
8
9
Строки прижаты к началу поперечной оси
align‑content: center
1
2
3
4
5
6
7
8
9
Строки прижаты к центру поперечной оси
align‑content: flex‑end
1
2
3
4
5
6
7
8
9
Строки прижаты к концу поперечной оси
В многострочных контейнерах за выравнивание строк на поперечной оси отвечает свойство align-content
align‑content: stretch
1
2
3
4
5
6
7
8
9
По умолчанию строки растягиваются на всю поперечную ось
align‑content: space‑around
1
2
3
4
5
6
7
8
9
Строки равномерно распределены
align‑content: space‑between
1
2
3
4
5
6
7
8
9
Первая и последняя строки отжаты к краям, оставшееся место делится поровну
align‑content: flex‑start
1
2
3
4
5
6
7
8
9
Строки прижаты к началу поперечной оси
align‑content: center
1
2
3
4
5
6
7
8
9
Строки прижаты к центру поперечной оси
align‑content: flex‑end
1
2
3
4
5
6
7
8
9
Строки прижаты к концу поперечной оси
Скрыто 112 разворотов