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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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;
}

Если после созда­ния столб­цов и строк в кон­тей­нере оста­лось сво­бод­ное про­стран­ство, то его можно рас­пре­де­лить, как во флек­с­бок­сах, с помо­щью justify-content и align-content

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 180px 180px;
  grid-template-rows: 60px 60px;
  justify-content: start;
  align-content: start;
}

justify‑content и align‑items во флексбоксах 

Первый элемент
Второй элемент
Третий элемент
Четвёртый элемент
Первый элемент
Второй элемент
Третий элемент
Четвёртый элемент

Если после создания столбцов и строк в контейнере осталось свободное пространство, то его можно распределить, как во флексбоксах, с помощью justify-content и align-content

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 180px 180px;
  grid-template-rows: 60px 60px;
  justify-content: start;
  align-content: start;
}

justify‑content и align‑items во флексбоксах 

Упражнение: выравнивание гридами

Изме­ните ЦСС так, чтобы пер­вый ука­за­тель повто­рил второй.


  
align-content: space-between;

  
align-items: end;

  
display: grid;

  
display: grid;

  
grid-template-columns: min-content min-content;

  
grid-template-rows: min-content min-content;

  
justify-content: space-between;





.sign {




}




.sign__header,


.sign__footer {




}




.sign__footer {




}

Вёрстка

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Дизайн

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Вёрстка

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Дизайн

  • Платформы 1⁠—4

  • Макдональдс

  • Бюро находок

  • Платформы 5⁠—8

  • Камеры хранения

  • Туалет

  • Кассы

  • Метро

2

Упражнение: выравнивание гридами

Измените ЦСС так, чтобы первый указатель повторил второй.


  
align-content: space-between;

  
align-items: end;

  
display: grid;

  
display: grid;

  
grid-template-columns: min-content min-content;

  
grid-template-rows: min-content min-content;

  
justify-content: space-between;





.sign {




}




.sign__header,


.sign__footer {




}




.sign__footer {




}

Где использовать гриды, а где флексбоксы

И гриды, и флек­с­боксы под­дер­жи­ва­ются всеми совре­мен­ными бра­у­зе­рами. Больше того, в неко­то­рых слу­чаях гриды и флек­с­боксы вза­и­мо­за­ме­ня­емы — меня­ешь display: inline-grid на inline-flex, всё работает.

Сове­туем выби­рать между флек­с­бок­сами и гри­дами, ори­ен­ти­ру­ясь на свой опыт, задачу и код: какой вари­ант даст меньше кода, какой проще вос­при­ни­мать и поддерживать?

По нашему опыту, флек­с­бокс больше под­хо­дит в слу­чае, когда рас­кладка опре­де­ля­ется содер­жи­мым и важны пере­носы. Ска­жем, в вёрстке списка тегов или вари­ан­тов ответа в чате, где важно сохра­нить соб­ствен­ные раз­меры элементов.

С дру­гой сто­роны, если важно впи­сать эле­менты в сетку из N коло­нок, лучше взять гриды. Код будет лако­нич­нее и понятнее:

Грид

.curriculum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5em;
}

Флексбокс

.curriculum {
  --columns: 4;
  --gap: .5em;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
}

.curriculum > * {
  flex: 1 1 calc(100% / var(--columns));
  max-width: calc((100% / var(--columns)) - var(--gap));
}

Чтобы мастерски овладеть флексбоксами и гридами, сыграйте в игры:

Где использовать гриды, а где флексбоксы

И гриды, и флексбоксы поддерживаются всеми современными браузерами. Больше того, в некоторых случаях гриды и флексбоксы взаимозаменяемы — меняешь display: inline-grid на inline-flex, всё работает.

Советуем выбирать между флексбоксами и гридами, ориентируясь на свой опыт, задачу и код: какой вариант даст меньше кода, какой проще воспринимать и поддерживать?

По нашему опыту, флексбокс больше подходит в случае, когда раскладка определяется содержимым и важны переносы. Скажем, в вёрстке списка тегов или вариантов ответа в чате, где важно сохранить собственные размеры элементов.

С другой стороны, если важно вписать элементы в сетку из N колонок, лучше взять гриды. Код будет лаконичнее и понятнее:

Грид

.curriculum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5em;
}

Флексбокс

.curriculum {
  --columns: 4;
  --gap: .5em;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
}

.curriculum > * {
  flex: 1 1 calc(100% / var(--columns));
  max-width: calc((100% / var(--columns)) - var(--gap));
}

Чтобы мастерски овладеть флексбоксами и гридами, сыграйте в игры:

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