🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы растянуть элемент на несколько ячеек, используют grid-column и grid-row. С помощью них мы указываем начальную и конечную направляющие, соответственно, всё пространство между ними отдаётся элементу:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три колонки, равномерно делящие пространство */
grid-template-rows: repeat(5, minmax(75px, auto)); /* Пять строк с минимальной высотой в 75 пк */
gap: 20px;
}
.one {
grid-column: 1 / 3; /* Займи колонки от первой до третьей направляющей */
grid-row: 1; /* Встань в первый ряд */
}
.two {
grid-column: 2 / span 2; /* Займи две колонки, начиная со второй направляющей */
grid-row: 1 / span 2; /* Займи два ряда, начиная со второй направляющей */
}
.three {
grid-column: 1; /* Встань в первую колонку */
grid-row: 2 / 5; /* Займи строки от второй до пятой направляющей */
}
.four {
grid-column: 3;
grid-row: 3 / span 2;
}
.five {
grid-column: 2;
grid-row: 4 / span 2;
}
.six {
grid-column: 1;
grid-row: 5;
}
По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы растянуть элемент на несколько ячеек, используют grid-column и grid-row. С помощью них мы указываем начальную и конечную направляющие, соответственно, всё пространство между ними отдаётся элементу:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три колонки, равномерно делящие пространство */
grid-template-rows: repeat(5, minmax(75px, auto)); /* Пять строк с минимальной высотой в 75 пк */
gap: 20px;
}
.one {
grid-column: 1 / 3; /* Займи колонки от первой до третьей направляющей */
grid-row: 1; /* Встань в первый ряд */
}
.two {
grid-column: 2 / span 2; /* Займи две колонки, начиная со второй направляющей */
grid-row: 1 / span 2; /* Займи два ряда, начиная со второй направляющей */
}
.three {
grid-column: 1; /* Встань в первую колонку */
grid-row: 2 / 5; /* Займи строки от второй до пятой направляющей */
}
.four {
grid-column: 3;
grid-row: 3 / span 2;
}
.five {
grid-column: 2;
grid-row: 4 / span 2;
}
.six {
grid-column: 1;
grid-row: 5;
}
Если в качестве значений grid‑column или grid‑row задать auto, браузер сам решит, что делать с элементом и его позицией: элементы разместятся в том же порядке, что и в коде, занимая по одной ячейке. Но если использовать auto / span N, то элемент займёт N колонок или строк, начиная с текущего места. Так можно получить «плиточную вёрстку», в которой порядок и размеры элементов определяются их разметкой. Например, как на промостраницах Эпла.
Чтобы сверстать похожие этажи, включим гриды, зададим направляющие и введём четыре вариации плиток:
.grid {
display: grid; /* Включаем раскладку гридами */
grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
background: #161617;
}
.tile {
padding: 15px;
border-radius: 15px;
background: #000;
color: #ffb6ff;
}
/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
grid-column: auto / span 1;
grid-row: auto / span 1;
}
/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
grid-column: auto / span 2;
grid-row: auto / span 1;
}
/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
grid-column: auto / span 2;
grid-row: auto / span 2;
}<div class="grid">
<div class="tile tile-2-cols-2-rows">
<h2>Meet Dynamic Island</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>48MP Main camera</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>The mastermind behind it all</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<p>A battery that’s all in, all day.</p>
</div>
<div class="tile tile-2-cols-1-rows">
<p>Film like a Pro.</p>
</div>
<div class="tile tile-1-cols-2-rows">
<p>Shaky shots, stable video</p>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Always-On display</h2>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Tougher than any smartphone glass</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>Water resistance</h2>
</div>
<div class="tile tile-1-cols-2-rows">
<h2>Emergency SOS via satellite</h2>
</div>
<div class="tile tile-2-cols-1-rows">
<p>A camera in a class by itselfie.</p>
</div>
</div>Если в качестве значений grid‑column или grid‑row задать auto, браузер сам решит, что делать с элементом и его позицией: элементы разместятся в том же порядке, что и в коде, занимая по одной ячейке. Но если использовать auto / span N, то элемент займёт N колонок или строк, начиная с текущего места. Так можно получить «плиточную вёрстку», в которой порядок и размеры элементов определяются их разметкой. Например, как на промостраницах Эпла.
Чтобы сверстать похожие этажи, включим гриды, зададим направляющие и введём четыре вариации плиток:
.grid {
display: grid; /* Включаем раскладку гридами */
grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
background: #161617;
}
.tile {
padding: 15px;
border-radius: 15px;
background: #000;
color: #ffb6ff;
}
/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
grid-column: auto / span 1;
grid-row: auto / span 1;
}
/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
grid-column: auto / span 2;
grid-row: auto / span 1;
}
/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
grid-column: auto / span 2;
grid-row: auto / span 2;
}<div class="grid">
<div class="tile tile-2-cols-2-rows">
<h2>Meet Dynamic Island</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>48MP Main camera</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>The mastermind behind it all</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<p>A battery that’s all in, all day.</p>
</div>
<div class="tile tile-2-cols-1-rows">
<p>Film like a Pro.</p>
</div>
<div class="tile tile-1-cols-2-rows">
<p>Shaky shots, stable video</p>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Always-On display</h2>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Tougher than any smartphone glass</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>Water resistance</h2>
</div>
<div class="tile tile-1-cols-2-rows">
<h2>Emergency SOS via satellite</h2>
</div>
<div class="tile tile-2-cols-1-rows">
<p>A camera in a class by itselfie.</p>
</div>
</div>justify‑items: stretch, по умолчанию
justify‑items: center
justify‑items: start
justify‑items: end
Выравнивание
Чтобы выровнять грид‑элементы внутри ячеек, используем justify-items у грид‑контейнера. По умолчанию элементы растягиваются на всю ячейку, но можно прижать их к началу, концу или центру ячейки.
Похожее свойство во флексбоксах называлось justify-content, но у justify-items свои варианты значений, и оно не зависит от оси раскладки — всегда выравнивает элементы по горизонтали.
justify‑content во флексбоксах
Выравнивание
Чтобы выровнять грид‑элементы внутри ячеек, используем justify-items у грид‑контейнера. По умолчанию элементы растягиваются на всю ячейку, но можно прижать их к началу, концу или центру ячейки.
Похожее свойство во флексбоксах называлось justify-content, но у justify-items свои варианты значений, и оно не зависит от оси раскладки — всегда выравнивает элементы по горизонтали.
justify‑content во флексбоксах
justify‑items: stretch, по умолчанию
justify‑items: start
justify‑items: center
justify‑items: end
align‑items: stretch
align‑items: center
align‑items: start
align‑items: end
Чтобы управлять выравниванием внутри ячеек по вертикали, используем align-items у грид‑контейнера.
Свойство align-items работает и во флексбоксах, но там зависит от направления поперечной оси.
align‑items во флексбоксах
Чтобы управлять выравниванием внутри ячеек по вертикали, используем align-items у грид‑контейнера.
Свойство align-items работает и во флексбоксах, но там зависит от направления поперечной оси.
align‑items во флексбоксах
align‑items: stretch
align‑items: start
align‑items: center
align‑items: end
Чтобы изменить выравнивание отдельного элемента внутри ячейки, используем justify-self и align-self
.cross {
justify-self: start;
align-self: start;
}
.pencil {
justify-self: end;
align-self: start;
}
.clock {
justify-self: start;
align-self: end;
}
.star {
justify-self: end;
align-self: end;
}Чтобы изменить выравнивание отдельного элемента внутри ячейки, используем justify-self и align-self
.cross {
justify-self: start;
align-self: start;
}
.pencil {
justify-self: end;
align-self: start;
}
.clock {
justify-self: start;
align-self: end;
}
.star {
justify-self: end;
align-self: end;
}