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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Перенос флекс‑элементов

По умол­ча­нию флекс‑кон­тей­нер одно­строч­ный: невме­ща­ю­щи­еся эле­менты пере­пол­няют его. Чтобы сде­лать его мно­го­строч­ным и раз­ре­шить пере­нос эле­мен­тов, исполь­зуют flex-wrap: wrap или flex-wrap: wrap-reverse

При этом flex-wrap: wrap-reverse рас­кла­ды­вает невме­ща­ю­щи­еся эле­менты в направ­ле­нии, про­ти­во­по­лож­ном попе­реч­ной оси: снизу вверх

По умолчанию

1
2
3
4
5
6
7
8
9

flex‑wrap: wrap

1
2
3
4
5
6
7
8
9

flex‑wrap: wrap‑reverse

1
2
3
4
5
6
7
8
9

Перенос флекс‑элементов

По умолчанию флекс‑контейнер однострочный: невмещающиеся элементы переполняют его. Чтобы сделать его многострочным и разрешить перенос элементов, используют flex-wrap: wrap или flex-wrap: wrap-reverse

При этом flex-wrap: wrap-reverse раскладывает невмещающиеся элементы в направлении, противоположном поперечной оси: снизу вверх

По умолчанию

1
2
3
4
5
6
7
8
9

flex‑wrap: wrap

1
2
3
4
5
6
7
8
9

flex‑wrap: wrap‑reverse

1
2
3
4
5
6
7
8
9

При смене направ­ле­ния глав­ной оси меня­ется и пове­де­ние пере­носа: flex-wrap: wrap рас­кла­ды­вает невме­ща­ю­щи­еся колонки по попе­реч­ной оси, wrap-reverse — по попе­реч­ной, но в обрат­ном порядке.

flex‑direction: column и flex‑wrap: wrap

1
2
3
4
5
6
7
8
9

flex‑direction: column и flex‑wrap: wrap‑reverse

1
2
3
4
5
6
7
8
9

При смене направления главной оси меняется и поведение переноса: flex-wrap: wrap раскладывает невмещающиеся колонки по поперечной оси, wrap-reverse — по поперечной, но в обратном порядке.

flex‑direction: column и flex‑wrap: wrap

1
2
3
4
5
6
7
8
9

flex‑direction: column и flex‑wrap: wrap‑reverse

1
2
3
4
5
6
7
8
9

В мно­го­строч­ных кон­тей­не­рах за вырав­ни­ва­ние строк на попе­реч­ной оси отве­чает свой­ство align-content

align‑content: stretch

1
2
3
4
5
6
7
8
9

По умолчанию строки растягиваются на всю поперечную ось

align‑content: space‑around

1
2
3
4
5
6
7
8
9

Строки равномерно распределены

align‑content: space‑between

1
2
3
4
5
6
7
8
9

Первая и последняя строки отжаты к краям, оставшееся место делится поровну

align‑content: flex‑start

1
2
3
4
5
6
7
8
9

Строки прижаты к началу поперечной оси

align‑content: center

1
2
3
4
5
6
7
8
9

Строки прижаты к центру поперечной оси

align‑content: flex‑end

1
2
3
4
5
6
7
8
9

Строки прижаты к концу поперечной оси

В многострочных контейнерах за выравнивание строк на поперечной оси отвечает свойство align-content

align‑content: stretch

1
2
3
4
5
6
7
8
9

По умолчанию строки растягиваются на всю поперечную ось

align‑content: space‑around

1
2
3
4
5
6
7
8
9

Строки равномерно распределены

align‑content: space‑between

1
2
3
4
5
6
7
8
9

Первая и последняя строки отжаты к краям, оставшееся место делится поровну

align‑content: flex‑start

1
2
3
4
5
6
7
8
9

Строки прижаты к началу поперечной оси

align‑content: center

1
2
3
4
5
6
7
8
9

Строки прижаты к центру поперечной оси

align‑content: flex‑end

1
2
3
4
5
6
7
8
9

Строки прижаты к концу поперечной оси

Есть два спо­соба задать про­светы между эле­мен­тами. Пер­вый — задать margin у флекс‑элементов:

.columns > * {
  margin: 20px 10px;
}

Вто­рой спо­соб — задать про­светы между эле­мен­тами с помо­щью gap у контейнера:

.columns {
  gap: 40px 20px;
}

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

margin: 20px 10px

1
2
3
4
5
6
7
8
9

gap: 40px 20px

1
2
3
4
5
6
7
8
9

Есть два способа задать просветы между элементами. Первый — задать margin у флекс‑элементов:

.columns > * {
  margin: 20px 10px;
}

margin: 20px 10px

1
2
3
4
5
6
7

Второй способ — задать просветы между элементами с помощью gap у контейнера:

.columns {
  gap: 40px 20px;
}

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

gap: 40px 20px

1
2
3
4
5
6
7

Чтобы лучше понять флексбоксы, проведём аналогию с авто‑лейаутом из Фигмы

Стрелки в левой колонке отвечают за направление главной оси:

  • flex‑wrap: wrap

  • flex‑direction: row

  • flex‑direction: column

Расстояние между элементами задаётся с помощью gap

Отступы снаружи элементов задаются с помощью свойств контейнера:

  • padding‑left и padding‑right

  • padding‑top и padding‑bottom

Выравнивание задаётся комбинацией свойств:

  • justify‑content: flex‑start; align‑items: flex‑start
  • justify‑content: center; align‑items: flex‑start
  • justify‑content: flex‑end; align‑items: flex‑start
  • justify‑content: flex‑start; align‑items: center
  • justify‑content: center; align‑items: center
  • justify‑content: flex‑end; align‑items: center
  • justify‑content: flex‑start; align‑items: flex‑end
  • justify‑content: center; align‑items: flex‑end
  • justify‑content: flex‑end; align‑items: flex‑end

flex‑wrap: wrap

flex‑direction: row

flex‑direction: column

gap

padding‑left и padding‑right

padding‑top и padding‑bottom

justify‑content: flex‑start; align‑items: flex‑start

justify‑content: center; align‑items: flex‑start

justify‑content: flex‑end; align‑items: flex‑start

justify‑content: flex‑start; align‑items: center

justify‑content: center; align‑items: center

justify‑content: flex‑end; align‑items: center

justify‑content: flex‑start; align‑items: flex‑end

justify‑content: center; align‑items: flex‑end

justify‑content: flex‑end; align‑items: flex‑end

Чтобы лучше понять флексбоксы, проведём аналогию с авто лейаутом из Фигмы.

Стрелки в левой колонке отвечают за направление главной оси:

  • flex‑wrap: wrap
  • flex‑direction: row
  • flex‑direction: column

Расстояние между элементами задаётся с помощью gap

Отступы снаружи элементов задаются с помощью свойств контейнера:

  • padding‑left и padding‑right
  • padding‑top и padding‑bottom

Выравнивание задаётся комбинацией свойств:

  • justify‑content: flex‑start; align‑items: flex‑start
  • justify‑content: center; align‑items: flex‑start
  • justify‑content: flex‑end; align‑items: flex‑start
  • justify‑content: flex‑start; align‑items: center
  • justify‑content: center; align‑items: center
  • justify‑content: flex‑end; align‑items: center
  • justify‑content: flex‑start; align‑items: flex‑end
  • justify‑content: center; align‑items: flex‑end
  • justify‑content: flex‑end; align‑items: flex‑end
Скрыто 110 разворотов
Закладки
Добавьте закладки
Ничего не нашлось