Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке блока «Галерея» сайта landing-order.ru.

Первым делом, вырезаем фоновую картинку и сохраняем в папку с картинками:

Верстка блока Галерея сайта landing-order.ru

Учитывая, что верстальщик допустил довольно грубую ошибку (задал ширину внутреннего блока для картинок 1000px, вместо МАКСИМАЛЬНЫХ 990), мы будем делать не 4, а 3 изображения в ширину. И сделаем всего 2 ряда.

В файл index.html заносим такой код:

В файл main.css заносим такой код:

Особенностью данного кода есть то, что мы внутри таблицы создаем еще одну таблицу для формирования строчек текста «Название» — «Сколько».

Выравнивание (по правому краю) левых, т.е. нечетных блоков-наследников делается с помощью кода:

Выравнивание (по левому краю) правых, т.е. четных блоков-наследников делается с помощью кода:

В следующий раз мы будем верстать блок «Гарантия» и «Подвал» — не пропустите!