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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

justify‑content: space‑between

⌘
✎
🕑

justify‑content: space‑around

⌘
✎
🕑

justify‑content: space‑evenly

⌘
✎
🕑

Чтобы отжать пер­вый и послед­ний эле­мент к краям, а остав­ше­еся место поде­лить, исполь­зуем justify-content: space-between. Чтобы рав­но­мерно поде­лить место между всеми эле­мен­тами, исполь­зуем justify-content: space-around или justify-content: space-evenly

space-around рав­но­мерно рас­пре­де­ляет эле­менты по ширине таким обра­зом, чтобы рас­сто­я­ние до краёв блока рав­ня­лось поло­вине рас­сто­я­ния между эле­мен­тами. space-evenly рас­пре­де­ляет эле­менты так, чтобы все рас­сто­я­ния были одинаковы.

Чтобы отжать первый и последний элемент к краям, а оставшееся место поделить, используем justify-content: space-between. Чтобы равномерно поделить место между всеми элементами, используем justify-content: space-around или justify-content: space-evenly

space-around равномерно распределяет элементы по ширине таким образом, чтобы расстояние до краёв блока равнялось половине расстояния между элементами. space-evenly распределяет элементы так, чтобы все расстояния были одинаковы.

justify‑content: space‑between

⌘
✎
🕑

justify‑content: space‑around

⌘
✎
🕑

justify‑content: space‑evenly

⌘
✎
🕑

align‑items: stretch

⌘
✎
🕑

По умолчанию элементы растягиваются на всю поперечную ось. Это align‑items: stretch

align‑items: baseline

⌘
✎
🕑

Если элементы нужно выровнять по базовой, используем align‑items: baseline

align‑items: flex‑start

⌘
✎
🕑

Чтобы прижать элементы на поперечной оси к началу, используем align‑items: flex‑start

align‑items: center

⌘
✎
🕑

Чтобы прижать к центру, используем align‑items: center

align‑items: flex‑end

⌘
✎
🕑

Чтобы прижать к концу, используем align‑items: flex‑end

Поперечная ось

Попе­реч­ная ось идёт пер­пен­ди­ку­лярно глав­ной. Соот­вет­ственно, если глав­ная ось идёт по гори­зон­тали, то попе­реч­ная прой­дёт по вер­ти­кали. И нао­бо­рот: если глав­ная ось идёт по вер­ти­кали, попе­реч­ная прой­дёт по горизонтали.

За вырав­ни­ва­ние эле­мен­тов на попе­реч­ной оси отве­чает свой­ство align-items

Поперечная ось

Поперечная ось идёт перпендикулярно главной. Соответственно, если главная ось идёт по горизонтали, то поперечная пройдёт по вертикали. И наоборот: если главная ось идёт по вертикали, поперечная пройдёт по горизонтали.

За выравнивание элементов на поперечной оси отвечает свойство align-items

align‑items: stretch

⌘
✎
🕑

По умолчанию элементы растягиваются на всю поперечную ось. Это align‑items: stretch

align‑items: baseline

⌘
✎
🕑

Если элементы нужно выровнять по базовой, используем align‑items: baseline

align‑items: flex‑start

⌘
✎
🕑

Чтобы прижать элементы на поперечной оси к началу, используем align‑items: flex‑start

align‑items: center

⌘
✎
🕑

Чтобы прижать к центру, используем align‑items: center

align‑items: flex‑end

⌘
✎
🕑

Чтобы прижать к концу, используем align‑items: flex‑end

align‑self: flex‑start

⌘
✎
🕑

align‑self: center

⌘
✎
🕑

align‑self: flex‑end

⌘
✎
🕑

Все зна­че­ния align-items, что мы рас­смот­рели выше, при­ме­ня­ются ко флекс‑кон­тей­неру и вли­яют на все эле­менты внутри него. Если отдель­ные эле­менты нужно выров­нять по‑осо­бен­ному на попе­реч­ной оси, исполь­зуют align-self в самих элементах.

Все значения align-items, что мы рассмотрели выше, применяются ко флекс‑контейнеру и влияют на все элементы внутри него. Если отдельные элементы нужно выровнять по‑особенному на поперечной оси, используют align-self в самих элементах.

align‑self: flex‑start

⌘
✎
🕑

align‑self: center

⌘
✎
🕑

align‑self: flex‑end

⌘
✎
🕑

В вырав­ни­ва­нии флекс‑эле­мен­тов есть трюк: если задать эле­менту мар­жин auto, он при­жмётся к про­ти­во­по­лож­ной стороне.

1
2
3
4
.module > :nth-child(3) {
  margin-left: auto;
  /* Сдвинет третий и последующие */
}

.module > :nth-child(4) {
  margin-bottom: auto;
}

Чаще всего авто­ма­ти­че­ские мар­жины исполь­зуют в моду­лях, чтобы «оттеснить» часть эле­мен­тов к краю или рас­ста­вить их по углам.

Управ­ле­ние про­ек­том
304 совета
.tag {
  display: flex;
}

.tag__caption {
  margin-top: auto;
  margin-left: auto;
}

Автоматические маржины

В выравнивании флекс‑элементов есть трюк: если задать элементу маржин auto, он прижмётся к противоположной стороне.

1
2
3
4
.module > :nth-child(3) {
  margin-left: auto;
  /* Сдвинет третий и последующие */
}

.module > :nth-child(4) {
  margin-bottom: auto;
}

Чаще всего автоматические маржины используют в модулях, чтобы «оттеснить» часть элементов к краю или расставить их по углам.

Управление проектом
304 совета
.tag {
  display: flex;
}

.tag__caption {
  margin-top: auto;
  margin-left: auto;
}

Автоматические маржины

Упражнение: применение флексбокса

Пере­та­щите ЦСС‑свой­ства в селек­торы, чтобы пункты меню встали в ряд, а послед­ний пункт меню при­жался к пра­вому краю.


  
display: flex;

  
margin-left: auto;






nav {




}




nav li:last-child {




}

Вёрстка

Дизайн

Вёрстка

Дизайн

Упражнение: применение флексбокса

Перетащите ЦСС‑свойства в селекторы, чтобы пункты меню встали в ряд, а последний пункт меню прижался к правому краю.


  
display: flex;

  
margin-left: auto;






nav {




}




nav li:last-child {




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