Элементы и стили (примеры)

Пример сайта:

HTML разметка:

CSS:

 

Логотипы вставляют с помощью тега img, так как логотип — это содержательное, а не декоративное изображение. Есть ошибочный подход, когда логотип вставляют фоном, например, у тега h1. Фон предназначен для вставки декоративных изображений. На всех страницах сайта, кроме главной, логотип оборачивают в ссылку, которая ведёт на главную. На главной странице ссылка на логотипе не нужна, так как ссылка не должна вести сама на себя. Чтобы было удобнее добавлять и убирать ссылку, картинку-логотип обычно оборачивают в блок-контейнер.

Важно научиться различать ссылки в обличье кнопок и обычные кнопки. Ведь если перед вами ссылка, то надо использовать тег a, а если кнопка, то тег button.

Обычно элемент является ссылкой, если есть подозрение, что он может привести к переходу на другую страницу. В магазине Кекса кнопка «Заказать» ведёт на страницу оформления заказа, поэтому это ссылка.

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

А ещё бывают ссылки, которые выглядят как обычный текст. Их тоже нельзя пропускать. В нашем случае «Аксессуары для котов Коллекция FW15» — это ссылка на страницу с описанием спецпредложения.

Ссылки могут открываться в текущей или в новой вкладке браузера. За это поведение отвечает атрибут target тега a и его значения:

• _self – ссылки открываются в той же вкладке, это значение по умолчанию.
• _blank – ссылки открываются в новой вкладке (или в новом окне браузера, если он не поддерживает вкладки).

Это не все значения атрибута, ещё есть _parent и _top, которые ведут себя почти как _self и уже давно нигде не используются.

Мы задаём стили только для ячеек в прайс-листе, а не для всех ячеек на странице, ведь в других элементах интерфейса ячейки могут отличаться. Если вы хотите задать стили для каких-то тегов, лучше ограничивайте их классом родительского элемента. Это считается хорошей практикой при вёрстке.

Задавать стили для таблицы мы будем с использованием селектора по классу .price-list, а не селектора по тегу table. Причины те же, что и в предыдущем шаге — таблица с прайс-листом может отличаться от других таблиц на сайте, поэтому у неё есть собственный класс и к этому классу нужно привязывать всю стилизацию.

Раздел формы обратной связи разметим дивом с классом feedback, добавим внутрь него заголовок второго уровня и поясняющий текст. Поясняющий текст — это полноценное предложение, поэтому для его разметки можно использовать тег p с классом feedback-tip.

Каждое поле ввода и подпись к нему будем оборачивать в блок с классом feedback-form-group. Это нужно, чтобы в дальнейшем расположить поля как на макете.

В макете подписи к полям располагаются на отдельной строчке, поэтому мы не будем оборачивать текст подписи и поле внутрь одного тега label. Вместо этого будем подписи и поля располагать рядом друг с другом и связывать их с помощью атрибутов for и id.

Следующий элемент — чекбокс или «галочка». Её мы поместим в обёртку с классом .checkbox-area, так как её внешний вид отличается от других полей.

На макете чекбокс и подпись к нему расположены на одной строке, поэтому можно обернуть поле и текст подписи в один тег label. В этом случае нам не нужны ни идентификатор у поля, ни атрибут for у подписи. Но имя полю нужно задать обязательно, используем имя subscription.

Отлично, форма готова. Теперь добавим для блоков .feedback-form-group небольшие внутренние отступы, чтобы поля не «прилипали» друг к другу.

 

Стилизация

Итак, начнём с задания глобальных параметров документа. Обычно браузеры добавляют небольшой отступ для всей страницы, чтобы контент не прилипал к краям. Этот отступ нам не нужен, так как в макете отступы будут в других контейнерах. Поэтому обнулим внешние и внутренние отступы у body.

Зададим глобальные текстовые стили документа. Для этого в макете нужно найти текстовые элементы с одинаковыми внешним видом. Конечно, вы найдёте несколько групп таких элементов. Нужно выбрать самую большую группу, потому что таких текстов на сайте будет больше всего.

Затем мы получаем параметры (размер, цвет, название шрифта, межстрочный интервал) основного текста из макета и прописываем их для body. Сразу же задаём контрастный цвет фона, чтобы основной текст читался хорошо.

Текстовые свойства наследуются, поэтому весь текст в документе будет выглядеть так, как описано в body. Это удобно, так основной вид текста преобладает в макете, и переопределять текстовые параметры для отличающихся элементов придётся по минимуму.

Напомним, что при задании значения свойства font-family сначала указывается через запятую названия шрифтов, а в конце желаемый тип шрифта: serif или sans-serif.

Обратите внимание, что одновременно с цветом текста мы задаём для body фоновый белый цвет. Это нужно для того, чтобы гарантированно получить контрастные цвета текста и фона, а не полагаться на настройки браузера по умолчанию.

Займёмся шапкой. Сейчас мы зададим цвет фона, а в следующей части курса добавим фоновое изображение. Фоновый цвет шапки сделаем тёмным по двум причинам:

• во-первых, фоновое изображение в шапке достаточно тёмное,
• во-вторых, текст в шапке белого цвета, а фон должен быть контрастным.

Зачем вообще задавать фоновый цвет блоку в котором есть фоновое изображение? Представьте, что эта картинка не загрузилась или грузится очень долго. В этом случае светлый текст будет легко читаться на контрастном тёмном фоне.

Навигационное меню мы разметили с помощью списка, а у списков по умолчанию есть отступы и маркеры. Сейчас мы сбросим маркеры и сделаем так, чтобы текст внутри списка был набран прописными символами.

Важно! Мы сбрасываем стили по умолчанию не для всех списков на странице, а только для списка меню, и используем для этого селектор по классу — .main-nav.

Сбрасывать стили по умолчанию для текстовых элементов (списков, заголовков, абзацев и так далее) с помощью глобальных селекторов по тегам — очень плохая практика.

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

Хорошим тоном считается стилизовать все состояния ссылок: состояние при наведении и активное состояние при нажатии. Эти состояния дизайнер отрисовывает в специальном макете — стайлгайде.

При наведении ссылка подчёркивается, а в активном состоянии цвет ссылки становится полупрозрачным.

Теперь давайте займёмся стилями для ссылок и кнопок с классом .btn.

Этот класс должен быть достаточно универсальным, так как применяться он будет и к тегам a, и к тегам button. Поэтому придётся задать достаточно много свойств. Но начнём мы с текстовых параметров, общих для всех кнопок: зададим цвет текста, прописные буквы, уберём подчёркивание.

Теперь приступим к оформлению раздела с преимуществами.

В этой части курса мы оформим заголовки и текст преимуществ, а также зададим второму и третьему преимуществу декоративную рамку слева.

В следующих частях мы выстроим блоки преимуществ по сетке и добавим фоновые оформительские изображения.

Для разметки преимуществ мы использовали список, которому снова нужно будет убрать маркеры.

В блоках преимуществ осталось стилизовать заголовки.

Текст в них похож на большой заголовок блока .promo.

Для удобства стилизации добавим тегам заголовков класс feature-title.

Обратите внимание на ещё одну тонкость: высота строки заголовков такая же, как и размер шрифта. Это решение «на грани», так как высота строки должна быть не меньше размера шрифта, иначе в многострочном заголовке текст будет слипаться.

Приступаем к разделу «Немного теории».

Обратите внимание, что заголовок этого раздела и заголовки остальных разделов в макете оформлены одинаково.Логично будет задать всем этим заголовкам один класс и использовать его для стилизации.

У блока «Немного теории» светло-серый фоновый цвет, и текст на его фоне выглядит контрастно. Поэтому цвет текста менять не будем.

Начнём оформлять статьи в блоке «Немного теории», которые мы разметили с помощью списка определений. В этом задании мы оформим заголовки статей и информацию об источнике.

Ранее мы разметили заголовок статьи с помощью тега h3, информацию об источнике с помощью тега i и поместили эти теги внутрь тега dt.

Сейчас для удобства стилизации добавим тегу h3 класс reference-title, обозначающий «заголовок в справочнике». А тегу i добавим класс reference-source, обозначающий «информация об источнике в справочнике».

И теперь зададим текстовые параметры для элементов, используя свежесозданные классы.

Обратим внимание на то, что для тега <i> в CSS мы зададим курсивный шрифт свойством font-style. Несмотря на то, что тег <i> в браузере по умолчанию отображается курсивом, лучше явно задать в CSS это свойство ещё раз. Так мы будем уверены, что в случае замены тега в разметке на другой, элемент по-прежнему будет курсивным.

Продолжаем оформлять статьи. Анонс статьи, состоящий из абзаца текста и картинки, мы разместили внутри тега dd. Давайте зададим размер шрифта анонса и немного оформим изображения.

На макете у изображений немного скруглены углы. Конечно, можно экспортировать из Photoshop картинки со скруглёнными углами. Но для создания декоративных эффектов лучше использовать возможности CSS везде, где это возможно, например:

• обесцветить изображение можно с помощью CSS-фильтров,
• повернуть или масштабировать с помощью CSS-трансформаций.

При использовании CSS файл изображения не подвергается деструктивным изменениям, а все эффекты можно легко изменять, используя одно и то же изображение.

Для скругления углов мы воспользуемся свойством border-radius.

В статьях нам осталось оформить ссылки на источник.

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

Займёмся разделом отзывов.

Заголовку добавим ранее созданный класс section-title.

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

По аналогии с предыдущими заданиями, добавим дополнительный класс для автора отзыва и используем его при стилизации.

Тег <cite> по умолчанию отображается в браузере курсивом, как и <i>. Поэтому чтобы не полагаться на браузерные стили, явно зададим для класса автора цитаты курсивный шрифт в CSS.

В популярных товарах всё аналогично предыдущим разделам.

Заголовок — .section-title, у блока светло-серый фон, у текста немного отличающиеся от стандартных значения.

Оформим прайс-лист. Сначала добавим класс заголовку, затем начнём офомлять таблицу с ценами.

Для всей таблицы зададим межстрочный интервал, чтобы у текста в ячейках было достаточно свободного пространства, и он легко читался. Для заголовочных и обычных ячеек зададим текстовые параметры согласно макету.

Сейчас таблица с ценами растягивается на всю ширину страницы, и ширина ячеек рассчитывается автоматически в зависимости от их содержания. В следующих частях курса мы зададим ширину столбцам таблицы в соответствии с макетом.

Теперь займёмся полями формы. В форме есть однострочные текстовые поля ввода, многострочное поле и выпадающий список.

По умолчанию интерактивные элементы формы не наследуют текстовые свойства: цвет, параметры шрифта. Дело в том, что в браузере этим элементам задаётся специальное предустановленное оформление.

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

Поэтому лучше воспользоваться специальным ключевым словом inherit. Оно заставляет элемент унаследовать значение соответствующего свойства у родителя. Если текстовые стили родителя изменятся, то и стили элементов формы изменятся автоматически.

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

В этом задании мы используем значение inherit для свойства font, так как это составное свойство, в котором описывается сразу несколько текстовых параметров (и все эти параметры будут наследоваться).

В макете под полем с чекбоксом есть декоративное подчёркивание. Сделаем его с помощью нижней рамки.

Отлично, нам остаётся оформить подвал.

Для начала зададим тёмный цвет фона и контрастный светлый цвет текста (аналогично мы оформляли шапку).

Затем блоками подвала добавим декоративные разграничители с помощью рамок.

Теперь давайте оформим заголовки в подразделах подвала. Они будут оформлены аналогично другим заголовкам на странице.

Также уберём маркеры в списках в подвале.

Теперь оформим ссылки в подвале.

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

Оформим блок со ссылками на социальные сети.

С призывом дружить всё понятно — задаём ему текстовые параметры из макета.

С кнопками социальных сетей вопросов больше. У нас они размечены как ссылки с текстом, а на макете это квадратные блоки с иконками.На этом этапе мы можем лишь задать для ссылок белый цвет.

Закончим оформление подвала, стилизовав тексты в блоке с копирайтом. Как и социальные ссылки, слово «любовь» на иконку сердца мы заменим в следующих частях.

В этой части курса поработаем над графическими элементами макета.

Давайте определимся, какие изображения считать декоративными. Если убрать декоративное изображение со страницы, то ущерба для содержания страницы не будет. То есть декоративные картинки добавляются на страницу только для оформления и не содержат ключевой информации.

По принципу прогрессивного улучшения декоративные изображения задаются с помощью фонов в CSS. На странице Кексби к декоративным изображениям относятся: большая фоновая картинка в шапке, иконки в блоке преимуществ (это чисто оформительские символы), картинка с Кексом справа от формы обратной связи, иконки в кнопках социальных сетей в подвале и сердечко в блоке копирайта.

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

Итак, сначала давайте зададим фоновое изображение шапки. В этом задании мы применим свойство background-size со значением cover.

Немного про свойство background-size. По умолчанию браузер не меняет размеры фонового изображения. Но если необходимо задать фону другие ширину и высоту или привязать его размеры к размерам родительского блока, применяется свойство background-size. При значении background-size: cover, которое мы сейчас зададим, изображению задаются минимально возможные размеры, при которых оно закроет всю фоновую область блока.

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

Сейчас иконки экспортированы как отдельные изображения в формате PNG, так как они по макету содержат прозрачные области.

В завершающих частях курса мы объединим иконки в один спрайт, чтобы оптимизировать количество запросов, которые отправляются при загрузке страницы.

В этой части курса «Кексби» мы займёмся сетками. Наконец-то наша страница станет нужной ширины, а блоки расположатся в нужном порядке.

Сейчас мы займёмся крупными сеточными блоками, а мелкие элементы оформим в следующих частях. Для сеточных блоков мы зададим размеры и отступы, которые возьмём из макета. И конечно мы создадим колонки.

Мы добавили кнопки масштабирования в верхнем правом углу мини-браузера, чтобы вам было удобнее просматривать страницу, когда вы зададите блокам настоящие размеры из макета.

Итак, для начала зададим для body минимальную ширину, чтобы для содержания страницы всегда было достаточно места вне зависимости от ширины окна браузера. Ширина содержания составляет 1020px, добавим к ней отступы справа и слева по 10px и получим минимальную ширину 1040px.

 

Мы обеспечили минимальную ширину страницы 1040px. Теперь на большом разрешении контент страницы будет прижиматься влево, а по макету должен располагаться по центру. Это хорошо видно на масштабе 0.5x.

Чтобы расположить содержание по центру, нам понадобится дополнительный контейнер-центровщик. Лучше всего для этого подойдёт тег div, ведь этот элемент нужен только для оформления страницы и никакого смысла не несёт.

Для центровщика будем использовать одно из типовых имён классов — container (другое типовое имя — wrapper). Центровщику зададим ширину 1020px (такую же, как ширина содержания) и автоматические маргины слева и справа.

Такой контейнер-центровщик мы будем использовать во всех блоках на странице, а начнём с шапки.

После добавления центровщика зададим отступы и минимальную высоту для шапки, а также уберём временные внутренние отступы в шапке и подвале.

А теперь давайте выстроим сетку шапки. Нам нужно расположить в один ряд логотип, навигацию и кнопку. В мини-браузере эти блоки выделены жёлтым цветом.

C помощью свойства float сместим логотип и меню влево, а кнопку «Заказать» вправо. Почему так? Согласно макету кнопка прибита к правому краю. Например, если ширина центровщика увеличится, то кнопка останется прижатой к правому краю контейнера, а логотип с меню — к левому.

Отметим ещё один момент. Плавающим сеточным блокам лучше всегда задавать ширину. Таким образом можно гарантировать, что при возможном изменении содержимого «флоатящегося» блока, а соответственно и его ширины, выстроенная сетка не развалится.

Поэтому-то мы и зададим ширину для блока с логотипом и меню явно.

Размер колонки с логотипом сделаем таким же, как размер картинки-логотипа. Ширину колонки с меню возьмём с запасом: от края первой буквы в меню, до края кнопки заказа. Запас нужен, например, чтобы в меню мог поместиться ещё один пункт.

Кнопку «Заказать» и остальные кнопки на странице мы будем оформлять в следующих частях курса, поэтому пока что для неё задавать ширину не будем.

Сетка шапки практически готова. Осталось добавить псевдораспорку для блока .header-top, в котором расположены плавающие элементы-колонки.

Псевдораспорку лучше добавлять на непосредственный родитель плавающих колонок, поэтому мы добавляем её на .header-top, а не на .container. Если бы мы добавили распорку на центровщик, то возникли бы проблемы с заданием отступа между блоками .header-top и .promo.

Класс псеводраспорки из этого задания будет использоваться для создания сеток на флоатах и в других блоках.

Остаётся сбросить отступы по умолчанию у списка и добавить пару отступов между блоками, чтобы колонки шапки выстроились как в макете.

Следующий на очереди — блок с преимуществами.

Сначала зададим блоку .features внутренние отступы сверху и снизу, как на макете.

Точно измерить вертикальные отступы почти невозможно. Дело в том, что в макете все элементы вырваны из потока, а вам нужно добавить их в поток страницы, сохранив при этом отступы.

Конечно, измерить отступы между двумя блоками с резкими границами легко. Все сложности начинаются при измерении отступов с участием текстовых элементов. Дело в том, что текстовая строка обычно выше, чем сами буквы. Когда текст попадает в поток страницы, пустое место сверху и снизу букв добавляет дополнительный отступ, по сравнению с тем, что в макете.

Как тогда быть с такими отступами? Обычно их измеряют «на глаз», а потом уже подгоняют под макет. Сначала вы измеряется отступ от границы блока до букв в строке, затем из него вычитается «пустое место» вверху (или внизу) строки и получается тот самый грубый отступ. Размер «пустого места» можно посчитать так: вычитаем из высоты строки размер шрифта и делим на два.

Полученный грубый отступ обычно либо подгоняют под макет, если нужно 100% совпадение, либо просто округляют, ведь полное совпадение «пиксель в пиксель» это скорее исключение, чем правило.

Посмотрим, как был получен отступ снизу у блока преимуществ. Сначала мы измерили отступ от нижней границы блока до нижней границы букв и получили 60px. Затем вычли из высоты строки размер шрифта и поделили на два: (24px - 16px) / 2 = 4px. То есть в каждой строке текста преимуществ под буквами есть 4 дополнительных пикселя. Вычитаем этот размер из общего отступа, получаем 56px и округляем до 55px. Ведь мы не гонимся за пиксельпёрфектом.

Конечно, в вёрстке итогового испытания мы по максимуму подгоним все вертикальные отступы под макет и сделаем их кратными 5.

А затем добавим в блок .features контейнер-центровщик, чтобы отцентровать всё содержимое.

Используем float: left, чтобы выстроить преимущества в ряд. После этого добавим псевдораспорку непосредственному родителю колонок (списку), чтобы убрать нежелательный эффект выпадания флоатов.

Чтобы добавить псевдораспорку, нужно просто добавить тегу класс clearfix, стили для которого мы задали ранее.

Пока три колонки сделать не получилось. Почему?

Во-первых, у списка ul есть собственные отступы по умолчанию, которые нужно обнулить. Напоминаем, что стили по умолчанию лучше сбрасывать у конкретного тега по классу, либо используя каскад от класса родительского блока.

Во-вторых, плавающим элементам-колонкам ширину нужно задавать явно. В противном случае их размер будет зависеть от содержания. Сейчас ширина колонок зависит от текста, поэтому в первый ряд влезло две колонки, а третья перенеслась на следующий.

Теперь немного математики.

Общая ширина колонки-преимущества по макету составляет 340px. Она включает внутренние отступы справа и слева по 30px (этот размер мы подобрали на глазок) и рамку слева шириной 1px.Но у первого блока рамки нет. Чтобы не усложнять расчёты, лучше вернуть блоку эту рамку (ранее мы рамку убирали совсем) и сделать её прозрачной.

Переходим к справочнику.

Сначала зададим для блока .cat-reference внутренние отступы. Кстати, на примере справочника видно, почему мы задаём именно внутренние, а не внешние вертикальные отступы: у блока серый фон, и отступ должен включать этот фон. Такое возможно сделать только с внутренними отступами. В других блоках внутренние отступы делаем для единообразия.

Верхний отступ раздела получится больше, чем на макете за счёт отступов заголовка, но с этим отступами разберёмся в следующих частях.

Затем добавим в блок центровщик и перейдём к внутренним элементам.

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

На этом шаге зададим ширину списка определений в справочнике как на макете.

Углубимся внутрь справочника.

Браузер добавляет отступы по умолчанию для списка определений и его элементов. Обнулим эти отступы, чтобы они нам не мешали.

Теперь нужно отделить одну статью справочника от другой. Тут нужно отметить, что список определений — не самая удобная для стилизации структура, потому что элементы в нём идут парами.

Мы могли бы задать отступ снизу для всех dd, но тогда бы пришлось убирать лишний отступ снизу у последнего dd с помощью дополнительного CSS-правила.

Можно поступить изящнее: добавить отступ сверху для dt, перед которыми есть dd. Тогда отступы добавятся всем dt кроме первого, то есть отступы будут только между статьями. Для этого нам понадобится селектор с +.

А у нас на очереди блок с отзывами.

Сначала традиционно добавим внутренние отступы для .reviews и обернём его содержимое в блок-центровщик. Отступ сверху в .reviewsтоже пока будет больше чем в макете из-за отступов заголовка.

Сами отзывы расположим в две колонки с помощью уже хорошо знакомого приёма с float. И не забываем про clearfix!

И снова отзывы не выстроились в колонки.

Мы не задали плавающим блокам ширину, и их размеры рассчитались от содержимого. В нашем случае текст внутри отзывов распирает их на всю ширину родительского контейнера.

По макету общая ширина отзыва составляет 430px (мы измерили её на глаз так, чтобы текст помещался в контейнер), которая складывается из рамки слева в 3px, внутреннего отступа слева в 50px и ширины содержимого 377px. При таких размерах оступ между отзывами составляет 80px;

У элемента blockquote есть свои отступы по умолчанию, которые в разных браузерах могут быть разными. Поэтому не забываем обнулить все остальные отступы.

С отзывами на этом всё, переходим к разделу с популярными товарами и прайс-листом.

Сначала зададим для блока .popular-and-price внутренние отступы, затем обернём всё содержимое (два смысловых подраздела с товарами и прайс-листом) в общий контейнер-центровщик.

И напоследок зададим отступ снизу для списка товаров.

Итак, популярные товары.

Сами товары мы выстроим в колонки с помощью уже знакомых флоатов и псевдораспорок.

Дополнительная сложность с этим блоком появляется из-за макета: в нём границы блоков не совпадают с направляющими и измерять размеры нужно очень внимательно.

Общая ширина товара составляет 308px, между товарами есть два отступа по 48px. Чтобы проверить, что товары поместятся в контейнер содержимого пиксель в пиксель, посчитаем общую ширину трёх колонок и двух отступов между ними:

Отлично, с замерами мы не ошиблись.

В дальнейшем, когда будем завершать оформление товаров и добавлять рамки, нужно будет не забыть уменьшить ширину.

Раздел с товарами может наполнять кто угодно, поэтому есть смысл подстраховаться на случай вставки слишком больших картинок. Для этого используем классический CSS-приём, когда картинкам задаётся масимальная ширина 100% и автоматическая высота. С такими стилями картинки не вылезут за границы родительского блока и будут сохранять пропорции.

На прошлом шаге мы задали всем товарам внешний отступ справа, поэтому третий товар не поместился в контейнер-центровщик и перенёсся на следующую строку.

И это логично, ведь мы рассчитывали ширину с учётом двух отступов между колонкам, а не трёх.

Чтобы исправить ситуацию, нужно убрать лишний оступ у третьего блока.

И на этом работа над сеткой блока .popular-and-price завершена.

Приступаем к блоку с формой обратной связи.

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

Детальную проработку стилей внутренних частей формы оставим на будущее.

Итак, без сетки остался только подвал.

Начнём с блока .page-footer. Как обычно добавим центровщик и зададим нужные отступы.

В подвале есть три внутренних радела: верхний, средний и нижний.

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

Теперь детально займёмся каждым из разделов подвала.

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

После этого останется только добавить clearfix для блока footer-top.

Теперь построим сетку среднего раздела подвала.

Тут всё по аналогии с предыдущими случаями из трёх колонок: флоат влево и clearfix у footer-middle.

Также не забываем задать ширину для колонок и добавить им внешние отступы справа, чтобы колонки не прилипали друг к другу.

Остался нижний раздел подвала.

Тут всё просто: блок с будущими иконками социальных сетей прижмём к левой части контейнера, а блок с копирайтом — к правой. А контейнеру добавим clearfix.

 

На этом сетки крупных блоков готовы.

HTML

CSS