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

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

 
между важными местами
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
© Бюро Горбунова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Помимо числа коло­нок функ­ция repeat умеет рабо­тать с клю­че­выми сло­вами auto-fill и auto-fit. Они создают столько коло­нок, сколько поме­стится при теку­щей ширине грид‑контейнера:

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  column-gap: 9px;
  row-gap: 18px;
}

Помимо числа колонок функция repeat умеет работать с ключевыми словами auto-fill и auto-fit. Они создают столько колонок, сколько поместится при текущей ширине грид‑контейнера:

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  column-gap: 9px;
  row-gap: 18px;
}

Если повто­рять колонки с фик­си­ро­ван­ной шири­ной, воз­можна «дыра» справа: в кон­тей­нере шири­ной 330 пик­се­лей и колон­ками шири­ной 150 пик­се­лей будет 2 колонки и 30 «лиш­них» пик­се­лей справа. Чтобы колонки рав­но­мерно рас­тя­ну­лись, заняв остав­ше­еся про­стран­ство, исполь­зуют функ­цию minmax и auto-fill или auto-fit:

.schedule {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Создаём как можно больше колонок, чтобы они заняли всю доступную ширину. При этом ширина колонок должна быть не менее 150 пк */
  gap: 18px; /* 18 пк между колонками и строками */
}

Если повторять колонки с фиксированной шириной, возможна «дыра» справа: в контейнере шириной 330 пикселей и колонками шириной 150 пикселей будет 2 колонки и 30 «лишних» пикселей справа. Чтобы колонки равномерно растянулись, заняв оставшееся пространство, используют функцию minmax и auto-fill или auto-fit:

.schedule {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Создаём как можно больше колонок, чтобы они заняли всю доступную ширину. При этом ширина колонок должна быть не менее 150 пк */
  gap: 18px; /* 18 пк между колонками и строками */
}

Клю­че­вое отли­чие между auto-fill и auto-fit про­яв­ля­ется, когда недо­ста­точно эле­мен­тов, чтобы запол­нить сетку по ука­зан­ным в repeat усло­виям. В таком слу­чае auto-fill создаёт мак­си­маль­ное коли­че­ство коло­нок, вклю­чая пустые:

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  gap: 18px;
}

А auto-fit рас­тя­ги­вает колонки, схло­пы­вая пустые:

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  gap: 18px;
}

Ключевое отличие между auto-fill и auto-fit проявляется, когда недостаточно элементов, чтобы заполнить сетку по указанным в repeat условиям. В таком случае auto-fill создаёт максимальное количество колонок, включая пустые:

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  gap: 18px;
}

А auto-fit растягивает колонки, схлопывая пустые:

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  gap: 18px;
}

За гори­зон­таль­ные направ­ля­ю­щие, за коли­че­ство и раз­мер строк отве­чает свой­ство 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;
}
Скрыто 57 разворотов
Закладки
Добавьте закладки
Ничего не нашлось