🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

Эта книга — поша­го­вая инструк­ция по вёрстке сай­тов на язы­ках ХТМЛ и ЦСС. Вы узна­ете не только как свер­стать сайт, но и как опуб­ли­ко­вать его в интер­нете, настро­ить кра­си­вый шаринг в соц­сети и под­клю­чить системы аналитики.

Отдель­ный раз­дел книги посвя­щён работе с вер­сталь­щи­ком: как ста­вить задачи, полу­чать пред­ска­зу­е­мый резуль­тат и пра­вильно при­ни­мать и внед­рять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

    Зна­ком­ство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Кон­троль качества

    Публикация

    Как рабо­тать с верстальщиком

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

    Знакомство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Контроль качества

    Публикация

    Как работать с верстальщиком

Скрыто 127 разворотов

За гори­зон­таль­ные направ­ля­ю­щие, за коли­че­ство и раз­мер строк отве­чает свой­ство grid-template-rows. Рабо­тает точно так же, как и grid-template-columns, но для строк.

Под­дер­жи­вает те же величины:

.grid {
  display: grid;
  grid-template-rows: 50px 20% 1fr 2fr;
}

Функ­цию repeat:

.grid {
  display: grid;
  grid-template-rows: repeat(4, 50px);
}

Функ­цию minmax с auto-fill и auto-fit:

.grid {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

  • Единицы измерения размеров 

  • Функция repeat 

  • Ключевые слова auto‑fill и auto‑fit 

50px
20%
1fr
2fr
50px
50px
50px
50px
minmax(50px, 1fr)
minmax(50px, 1fr)
minmax(50px, 1fr)
minmax(50px, 1fr)
50px
20%
1fr
2fr
50px
50px
50px
50px
minmax(50px, 1fr)
minmax(50px, 1fr)
minmax(50px, 1fr)
minmax(50px, 1fr)

За горизонтальные направляющие, за количество и размер строк отвечает свойство grid-template-rows. Работает точно так же, как и grid-template-columns, но для строк.

Поддерживает те же величины:

.grid {
  display: grid;
  grid-template-rows: 50px 20% 1fr 2fr;
}

Функцию repeat:

.grid {
  display: grid;
  grid-template-rows: repeat(4, 50px);
}

Функцию minmax с auto-fill и auto-fit:

.grid {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

  • Единицы измерения размеров 

  • Функция repeat 

  • Ключевые слова auto‑fill и auto‑fit 

За поря­док, в кото­ром эле­менты запол­няют кон­тей­нер, отве­чает grid-auto-flow. По умол­ча­нию эле­менты запол­няют его ряд за рядом:

1
2
3
4
.grid {
  grid-auto-flow: row;
}

Если сме­нить grid-auto-flow на column, эле­менты ста­нут запол­нять грид‑кон­тей­нер колонку за колон­кой, сверху вниз:

1
2
3
4
.grid {
  grid-auto-flow: column;
}

За порядок, в котором элементы заполняют контейнер, отвечает grid-auto-flow. По умолчанию элементы заполняют его ряд за рядом:

1
2
3
4
.grid {
  grid-auto-flow: row;
}

Если сменить grid-auto-flow на column, элементы станут заполнять грид‑контейнер колонку за колонкой, сверху вниз:

1
2
3
4
.grid {
  grid-auto-flow: column;
}
1
2
3
4
1
2
3
4
5
6
7
1
2
3
4
5
6
7
1
2
3
4
5
6
7

Собе­рём сетку на четыре элемента:

.grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px;
}

Если эле­мен­тов внутри грид‑кон­тей­нера больше, чем доступ­ных ячеек, то для них авто­ма­ти­че­ски созда­дутся колонки и ряды.

За раз­меры неявно создан­ных ячеек отве­чают свой­ства grid-auto-columns и grid-auto-rows. Доба­вим grid-auto-rows: 50px, чтобы новые ячейки полу­чили высоту в 50 пикселей:

.grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px;
  grid-auto-rows: 50px; /* Пусть автоматические ряды имеют высоту в 50 пк */
}

Если эле­менты запол­няют кон­тей­нер не по стро­кам, а по колон­кам, исполь­зуем grid-auto-columns

.grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px;
  grid-auto-flow: column;
  grid-auto-columns: 50px; /* Пусть автоматические колонки имеют ширину в 50 пк */
}

МДН:

1
2
3
4
1
2
3
4
5
6
7
1
2
3
4
5
6
7
1
2
3
4
5
6
7

Соберём сетку на четыре элемента:

.grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px;
}

Если элементов внутри грид‑контейнера больше, чем доступных ячеек, то для них автоматически создадутся колонки и ряды.

За размеры неявно созданных ячеек отвечают свойства grid-auto-columns и grid-auto-rows. Добавим grid-auto-rows: 50px, чтобы новые ячейки получили высоту в 50 пикселей:

.grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px;
  grid-auto-rows: 50px; /* Пусть автоматические ряды имеют высоту в 50 пк */
}

Если элементы заполняют контейнер не по строкам, а по колонкам, используем grid-auto-columns

.grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px;
  grid-auto-flow: column;
  grid-auto-columns: 50px; /* Пусть автоматические колонки имеют ширину в 50 пк */
}

МДН:

С помо­щью grid-auto-columns и grid-auto-flow можно собрать адап­тив­ные колонки, рав­но­мерно деля­щие доступ­ное пространство:

.cols {
  display: grid; /* Включаем гриды */
  grid-auto-columns: minmax(100px, 1fr); /* Пусть неявные колонки равномерно делят свободное пространство, сохраняя минимальную ширину в 100 пк */
  grid-auto-flow: column; /* Пусть невлезающие элементы выстраиваются в колонки */
  gap: 18px; /* Задаём межколонник в 18 пк */
  height: 100%; /* Растягиваем колонки по высоте */
}
<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Четвёртая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  <div>Вторая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Пятая колонка</div>
</div>

Адаптивные колонки на флексбоксах 

Пер­вая колонка
Вто­рая колонка
Тре­тья колонка
Чет­вёр­тая колонка
Пер­вая колонка
Вто­рая колонка
Пер­вая колонка
Вто­рая колонка
Тре­тья колонка
Чет­вёр­тая колонка
Пятая колонка
Первая колонка
Вторая колонка
Третья колонка
Чет­вёр­тая колонка
Первая колонка
Вторая колонка
Первая колонка
Вторая колонка
Третья колонка
Чет­вёр­тая колонка
Пятая колонка

С помощью grid-auto-columns и grid-auto-flow можно собрать адаптивные колонки, равномерно делящие доступное пространство:

.cols {
  display: grid; /* Включаем гриды */
  grid-auto-columns: minmax(100px, 1fr); /* Пусть неявные колонки равномерно делят свободное пространство, сохраняя минимальную ширину в 100 пк */
  grid-auto-flow: column; /* Пусть невлезающие элементы выстраиваются в колонки */
  gap: 18px; /* Задаём межколонник в 18 пк */
  height: 100%; /* Растягиваем колонки по высоте */
}
<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Четвёртая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  <div>Вторая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Пятая колонка</div>
</div>

Адаптивные колонки на флексбоксах 

Ком­би­на­цию grid-auto-columns с клю­че­выми сло­вами min-content, max-content или fit-content исполь­зуют для рас­кладки, в кото­рой ширина и коли­че­ство коло­нок зави­сит от содер­жи­мого. Напри­мер, при вёрстке гори­зон­таль­ного меню:

.menu {
  display: grid;
  grid-auto-flow: column; /* Автоматически раскладываем содержимое в колонки */
  grid-auto-columns: max-content; /* Автоматически создаём колонки по количеству пунктов меню с шириной по их содержимому. Мы используем max-content, а не min-content, чтобы пункты меню из нескольких слов всегда оставались в одну строку */
  column-gap: 20px; /* Задаём межколонник в 20 пк */
}

В слу­чае с тек­стом min‑content — это «займи так мало места, чтобы самое длин­ное слово вме­сти­лось», а max‑content — это «займи так много места, чтобы текст не при­ш­лось переносить».

Ключевые слова min‑content, max‑content и fit‑content в ЦСС

Комбинацию grid-auto-columns с ключевыми словами min-content, max-content или fit-content используют для раскладки, в которой ширина и количество колонок зависит от содержимого. Например, при вёрстке горизонтального меню:

.menu {
  display: grid;
  grid-auto-flow: column; /* Автоматически раскладываем содержимое в колонки */
  grid-auto-columns: max-content; /* Автоматически создаём колонки по количеству пунктов меню с шириной по их содержимому. Мы используем max-content, а не min-content, чтобы пункты меню из нескольких слов всегда оставались в одну строку */
  column-gap: 20px; /* Задаём межколонник в 20 пк */
}

В случае с текстом min‑content — это «займи так мало места, чтобы самое длинное слово вместилось», а max‑content — это «займи так много места, чтобы текст не пришлось переносить».

Ключевые слова min‑content, max‑content и fit‑content в ЦСС

Скрыто 88 разворотов
Закладки
Добавьте закладки
Ничего не нашлось