🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Флоаты
С помощью флоатов элемент можно прижать либо к левому, либо к правому краю родителя. Следующие за ним элементы подтягиваются вверх, пытаясь занять его место, или обтекают его.
Флоаты используют редко, чаще всего, чтобы задать картинке обтекание текстом:
<section>
<img src="ostap.jpg">
<h3>Кто такой? Чем знаменит?</h3>
<p>
Я великий комбинатор,
идейный борец за денежные знаки.
</p>
<p>
Кроме того, я знаю четыреста сравнительно честных
способа отъёма денег.
</p>
</section>img {
/* Прижимаем картинку вправо */
float: right;
/* Фиксируем высоту картинки */
height: 8em;
width: auto;
/* Добавляем отступ слева,
чтобы текст не влипал в иллюстрацию */
margin-left: 1em;
}Давным‑давно разработчики «хакали» ЦСС, создавая колоночную вёрстку на флоатах и маржинах:
Флоаты
С помощью флоатов элемент можно прижать либо к левому, либо к правому краю родителя. Следующие за ним элементы подтягиваются вверх, пытаясь занять его место, или обтекают его.
Флоаты используют редко, чаще всего, чтобы задать картинке обтекание текстом:
<section>
<img src="ostap.jpg">
<h3>Кто такой? Чем знаменит?</h3>
<p>
Я великий комбинатор,
идейный борец за денежные знаки.
</p>
<p>
Кроме того, я знаю четыреста сравнительно честных
способа отъёма денег.
</p>
</section>img {
/* Прижимаем картинку вправо */
float: right;
/* Фиксируем высоту картинки */
height: 8em;
width: auto;
/* Добавляем отступ слева,
чтобы текст не влипал в иллюстрацию */
margin-left: 1em;
}Давным‑давно разработчики «хакали» ЦСС, создавая колоночную вёрстку на флоатах и маржинах:
Флексбоксы
Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке.
Чтобы включить флексбокс, нужно задать элементу 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