🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
position: absolute
Абсолютное позиционирование используют, когда нужно что‑то вытащить из потока и переставить в другое место: поставить в угол, на поля или по центру. Кроме того, абсолютное позиционирование часто используют в паре с псевдо‑элементами: например, для добавления линеек, маркеров или подписей.
Так в примере выше мы используем псевдо‑элемент ::before, чтобы добавить верхнюю линейку к меню, и ::after, чтобы добавить нижнюю линейку и звёздочку к пункту меню.
Также обратите внимание на отрицательные координаты: с помощью абсолютного позиционирования элементы можно растягивать и выносить за пределы контейнера.
nav {
/* Абсолютно спозиционированные линейки
будут отсчитывать свои координаты от меню */
position: relative;
/* Добавляем поля сверху-снизу */
padding: 0 8px;
}
nav::before,
nav::after {
/* Используем псевдо-элементы в качестве линеек:
даём им высоту и фон */
content: '';
height: 1px;
background: rgba(0, 0, 0, .07);
/* Растягиваем линейки от края до края без полей */
position: absolute;
left: -8px;
right: -8px;
}
nav::before {
/* Первую линейку ставим над меню */
top: 0;
}
nav::after {
/* Вторую линейку ставим под меню */
bottom: -4px;
}
nav li:nth-child(3) {
/* У «Домов» будет свой особенный значок */
position: relative;
}
nav li:nth-child(3)::after {
/* Добавляем звёздочку перед «Домами» */
content: '★';
color: red;
/* Ставим её перед текстом */
position: absolute;
right: 100%;
margin-right: 1px;
}
position: absolute
Абсолютное позиционирование используют, когда нужно что‑то вытащить из потока и переставить в другое место: поставить в угол, на поля или по центру. Кроме того, абсолютное позиционирование часто используют в паре с псевдо‑элементами: например, для добавления линеек, маркеров или подписей.
Так в примере выше мы используем псевдо‑элемент ::before, чтобы добавить верхнюю линейку к меню, и ::after, чтобы добавить нижнюю линейку и звёздочку к пункту меню.
Также обратите внимание на отрицательные координаты: с помощью абсолютного позиционирования элементы можно растягивать и выносить за пределы контейнера.
nav {
/* Абсолютно спозиционированные линейки
будут отсчитывать свои координаты от меню */
position: relative;
/* Добавляем поля сверху-снизу */
padding: 0 8px;
}
nav::before,
nav::after {
/* Используем псевдо-элементы в качестве линеек:
даём им высоту и фон */
content: '';
height: 1px;
background: rgba(0, 0, 0, .07);
/* Растягиваем линейки от края до края без полей */
position: absolute;
left: -8px;
right: -8px;
}
nav::before {
/* Первую линейку ставим над меню */
top: 0;
}
nav::after {
/* Вторую линейку ставим под меню */
bottom: -4px;
}
nav li:nth-child(3) {
/* У «Домов» будет свой особенный значок */
position: relative;
}
nav li:nth-child(3)::after {
/* Добавляем звёздочку перед «Домами» */
content: '★';
color: red;
/* Ставим её перед текстом */
position: absolute;
right: 100%;
margin-right: 1px;
}
position: fixed и sticky
Фиксированное позиционирование используют для штук, которые всегда должны быть в области видимости: кнопка «Заказать дизайн», диалог в Чатре или сообщение об использовании кук на сайте.
.fixed {
position: fixed;
left: 20px;
bottom: 20px;
}Залипающее позиционирование используют, когда нужно, чтобы элемент стоял на месте, пока до него не докрутят, затем залип, а при обратной прокрутке — отлип.
.sticky {
position: sticky;
top: 20px;
}
position: fixed и sticky
Фиксированное позиционирование используют для штук, которые всегда должны быть в области видимости: кнопка «Заказать дизайн», диалог в Чатре или сообщение об использовании кук на сайте.
.fixed {
position: fixed;
left: 20px;
bottom: 20px;
}Залипающее позиционирование используют, когда нужно, чтобы элемент стоял на месте, пока до него не докрутят, затем залип, а при обратной прокрутке — отлип.
.sticky {
position: sticky;
top: 20px;
}
Флоаты
С помощью флоатов элемент можно прижать либо к левому, либо к правому краю родителя. Следующие за ним элементы подтягиваются вверх, пытаясь занять его место, или обтекают его.
Флоаты используют редко, чаще всего, чтобы задать картинке обтекание текстом:
<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;
}
⌘
✎
🕑
Главная ось →
Поперечная ось →
Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы
Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы.
Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы.
⌘
✎
🕑
Главная ось →
Поперечная ось →
Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы