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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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 {




}

Ком­би­на­цию рас­кладки по осям удобно исполь­зо­вать для цен­тровки. Напри­мер, чтобы отцен­три­ро­вать модуль по гори­зон­тали и вер­ти­кали отно­си­тельно окна бра­у­зера, нужно сде­лать body флекс‑кон­тей­не­ром и выров­нять по цен­тру флекс‑эле­менты по глав­ной и попе­реч­ной осям:

body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Комбинацию раскладки по осям удобно использовать для центровки. Например, чтобы отцентрировать модуль по горизонтали и вертикали относительно окна браузера, нужно сделать body флекс‑контейнером и выровнять по центру флекс‑элементы по главной и поперечной осям:

body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

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

Нач­нём с раз­метки трех­ко­ло­ноч­ной страницы:

<header>
  <div>Логотип</div>
  …
</header>

<main>
  <article>
    <p>…</p>
  </article>
  
  <nav>
    <li>Навигация</li>
    …
  </nav>
  
  <aside>
    <div>Реклама</div>
    …
  </aside>
</main>

Пре­вра­тим шапку, содер­жи­мое и сайдбары во флекс‑кон­тей­неры и рас­кра­сим флекс‑эле­менты для наглядности:

header,
main,
aside,
nav {
  display: flex;
}

header > *,
article > *,
aside > *,
nav > * {
  min-height: 36px;
  padding: 9px;
  margin: 9px;
  background: #e5f5ff;
}

Обра­тите вни­ма­ние: по умол­ча­нию флекс‑эле­менты раз­ло­жи­лись в строку, flex-direction: row

Дадим стра­нице всю доступ­ную высоту, раз­ло­жим по вер­ти­кали и рас­тя­нем её содержимое:

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1; /* Это заклинание заставляет <main> занять всё свободное пространство. Мы рассмотрим его чуть позже */
}

В левом сайдбаре раз­ло­жим эле­менты сверху вниз:

nav {
  flex-direction: column;
  justify-content: flex-start;
}

В пра­вом сайдбаре рав­но­мерно рас­пре­де­лим элементы:

aside {
  flex-direction: column;
  justify-content: space-between;
}

И поме­няем поря­док эле­мен­тов, чтобы колонка с нави­га­цией была слева:

nav {
  flex-direction: column;
  justify-content: flex-start;
  order: -1; /* И это свойство мы рассмотрим чуть позже */
}

По умол­ча­нию флекс‑эле­менты зани­мают столько места, сколько нужно их содер­жи­мому. Поэтому колонки с нави­га­цией и рекла­мой сжались.

Чтобы ширина коло­нок с нави­га­цией и рекла­мой не зави­села тек­ста, под­чи­ним вёрстку пяти­ко­ло­ноч­ной сетке. Зада­дим про­пор­ции, по кото­рым колонки и ста­тья делят сво­бод­ное место в 1:3:1:

nav {
  flex-direction: column;
  justify-content: flex-start;
  order: -1;
  flex-grow: 1;
  flex-basis: 0;
}

aside {
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0;
}

article {
  flex-grow: 3;
  flex-basis: 0;
}
Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

Логотип
Новости
Проекты
О нас

Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.

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

Начнём с разметки трехколоночной страницы:

<header>
  <div>Логотип</div>
  …
</header>

<main>
  <article>
    <p>…</p>
  </article>
  
  <nav>
    <li>Навигация</li>
    …
  </nav>
  
  <aside>
    <div>Реклама</div>
    …
  </aside>
</main>

Превратим шапку, содержимое и сайдбары во флекс‑контейнеры и раскрасим флекс‑элементы для наглядности:

header,
main,
aside,
nav {
  display: flex;
}

header > *,
article > *,
aside > *,
nav > * {
  min-height: 36px;
  padding: 9px;
  margin: 9px;
  background: #e5f5ff;
}

Обратите внимание: по умолчанию флекс‑элементы разложились в строку, flex-direction: row

Дадим странице всю доступную высоту, разложим по вертикали и растянем её содержимое:

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1; /* Это заклинание заставляет <main> занять всё свободное пространство. Мы рассмотрим его чуть позже */
}

В левом сайдбаре разложим элементы сверху вниз:

nav {
  flex-direction: column;
  justify-content: flex-start;
}

В правом сайдбаре равномерно распределим элементы:

aside {
  flex-direction: column;
  justify-content: space-between;
}

И поменяем порядок элементов, чтобы колонка с навигацией была слева:

nav {
  flex-direction: column;
  justify-content: flex-start;
  order: -1; /* И это свойство мы рассмотрим чуть позже */
}

По умолчанию флекс‑элементы занимают столько места, сколько нужно их содержимому. Поэтому колонки с навигацией и рекламой сжались.

Чтобы ширина колонок с навигацией и рекламой не зависела текста, подчиним вёрстку пятиколоночной сетке. Зададим пропорции, по которым колонки и статья делят свободное место в 1:3:1:

nav {
  flex-direction: column;
  justify-content: flex-start;
  order: -1;
  flex-grow: 1;
  flex-basis: 0;
}

aside {
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0;
}

article {
  flex-grow: 3;
  flex-basis: 0;
}
Скрыто 116 разворотов
Закладки
Добавьте закладки
Ничего не нашлось