🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Флексбоксы
Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке.
Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.
Относитесь к флекс‑контейнеру, как к прямоугольному формату, внутри которого можно расположить несколько элементов по строкам или колонкам, выровняв их по одной из сторон или распределив по формату.
Начнём с разметки:
<div class="columns">
<div>Первая</div>
<div>Вторая</div>
<div>Третья</div>
</div>Добавим колонкам цвет и отступы для наглядности:
/* Составной селектор > * выделяет
любые элементы (*), находящиеся
непосредственно в .columns (>) */
.columns > * {
background: #e5f5ff;
padding: 9px;
}Включим флексбокс:
.columns {
display: flex;
}Равномерно распределим колонки, отжав первую и последнюю к краям:
.columns {
display: flex;
justify-content: space-between;
}
Флексбоксы
Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке.
Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.
Относитесь к флекс‑контейнеру, как к прямоугольному формату, внутри которого можно расположить несколько элементов по строкам или колонкам, выровняв их по одной из сторон или распределив по формату.
Начнём с разметки:
<div class="columns">
<div>Первая</div>
<div>Вторая</div>
<div>Третья</div>
</div>Добавим колонкам цвет и отступы для наглядности:
/* Составной селектор > * выделяет
любые элементы (*), находящиеся
непосредственно в .columns (>) */
.columns > * {
background: #e5f5ff;
padding: 9px;
}Включим флексбокс:
.columns {
display: flex;
}Равномерно распределим колонки, отжав первую и последнюю к краям:
.columns {
display: flex;
justify-content: space-between;
}
⌘
✎
🕑
Главная ось →
Поперечная ось →
Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы
Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы.
Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы.
⌘
✎
🕑
Главная ось →
Поперечная ось →
Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы
flex‑direction: row
flex‑direction: row‑reverse
flex‑direction: column
flex‑direction: column‑reverse
Главная ось
За направление главной оси отвечает flex-direction. Если элементы нужно разложить слева направо, используем flex-direction: row; справа налево — row-reverse. Если сверху вниз, используем flex-direction: column; снизу вверх — column-reverse
Главная ось
За направление главной оси отвечает flex-direction. Если элементы нужно разложить слева направо, используем flex-direction: row; справа налево — row-reverse. Если сверху вниз, используем flex-direction: column; снизу вверх — column-reverse
flex‑direction: row
flex‑direction: column
flex‑direction: row‑reverse
flex‑direction: column‑reverse
justify‑content: flex‑start
justify‑content: center
justify‑content: flex‑end
За выравнивание элементов на главной оси отвечает свойство justify-content. Если элементы нужно прижать к началу оси, используем justify-content: flex-start; если к концу, то justify-content: flex-end; если к центру, то justify-content: center
За выравнивание элементов на главной оси отвечает свойство justify-content. Если элементы нужно прижать к началу оси, используем justify-content: flex-start; если к концу, то justify-content: flex-end; если к центру, то justify-content: center
justify‑content: flex‑start
justify‑content: center
justify‑content: flex‑end
justify‑content: space‑between
justify‑content: space‑around
justify‑content: space‑evenly
Чтобы отжать первый и последний элемент к краям, а оставшееся место поделить, используем justify-content: space-between. Чтобы равномерно поделить место между всеми элементами, используем justify-content: space-around или justify-content: space-evenly
space-around равномерно распределяет элементы по ширине таким образом, чтобы расстояние до краёв блока равнялось половине расстояния между элементами. space-evenly распределяет элементы так, чтобы все расстояния были одинаковы.
Чтобы отжать первый и последний элемент к краям, а оставшееся место поделить, используем justify-content: space-between. Чтобы равномерно поделить место между всеми элементами, используем justify-content: space-around или justify-content: space-evenly
space-around равномерно распределяет элементы по ширине таким образом, чтобы расстояние до краёв блока равнялось половине расстояния между элементами. space-evenly распределяет элементы так, чтобы все расстояния были одинаковы.