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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

Скрыто 122 разворота
1fr
1fr
1fr
1fr
1fr
1fr

grid‑template‑columns: repeat(6, 1fr) — то же самое, что grid‑template‑columns: 1fr 1fr 1fr 1fr 1fr 1fr

2fr
2fr
2fr
1fr
1fr
1fr

grid‑template‑columns: repeat(3, 2fr) repeat(3, 1fr) поделит контейнер в соотношении 2:2:2:1:1:1

50px
1fr
1fr
1fr
1fr
50px

grid‑template‑columns: 50px repeat(4, 1fr) 50px выделит первой и последней колонке по 50 пк, а оставшееся место поделит поровну между четырьмя колонками

Чтобы не дуб­ли­ро­вать опи­са­ния оди­на­ко­вых коло­нок, исполь­зуют функ­цию repeat. Ска­жем, repeat(6, 1fr) создаст шесть направ­ля­ю­щих шири­ной в 1fr. Функ­цию можно исполь­зо­вать в пере­мешку с дру­гими зна­че­ни­ями и повто­рять столько раз, сколько нужно.

Чтобы не дублировать описания одинаковых колонок, используют функцию repeat. Скажем, repeat(6, 1fr) создаст шесть направляющих шириной в 1fr. Функцию можно использовать в перемешку с другими значениями и повторять столько раз, сколько нужно.

1fr
1fr
1fr
1fr
1fr
1fr

grid‑template‑columns: repeat(6, 1fr) — то же самое, что grid‑template‑columns: 1fr 1fr 1fr 1fr 1fr 1fr

2fr
2fr
2fr
1fr
1fr
1fr

grid‑template‑columns: repeat(3, 2fr) repeat(3, 1fr) поделит контейнер в соотношении 2:2:2:1:1:1

50px
1fr
1fr
1fr
1fr
50px

grid‑template‑columns: 50px repeat(4, 1fr) 50px выделит первой и последней колонке по 50 пк, а оставшееся место поделит поровну между четырьмя колонками

Напри­мер, так можно свер­стать рас­пи­са­ние лек­ций курса, в кото­ром в каж­дой строке должно быть 5 пре­вью­шек оди­на­ко­вого размера:

.schedule {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 9px; /* 18 пк между рядами, 9 пк между колонкамии*/
}

Например, так можно сверстать расписание лекций курса, в котором в каждой строке должно быть 5 превьюшек одинакового размера:

.schedule {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 9px; /* 18 пк между рядами, 9 пк между колонкамии*/
}

Помимо числа коло­нок функ­ция 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;
}
Скрыто 93 разворота
Закладки
Добавьте закладки
Ничего не нашлось