В этом скринкасте мы углубимся в раздел «Сделки». Раздел «Сделки» - это, по сути, «стена рекламы». Это область сайта, в которой люди должны будут перемещаться самостоятельно, поэтому я не беспокоюсь о том, чтобы реклама заглушала мысли людей. Кроме того, каждое объявление имеет скидку и является продуктом, который я лично рекомендую, так что никакой тени не происходит.
У нас уже есть заголовок. У нас также уже есть контент, который нам нужно стилизовать. Это идеальное место, чтобы сразу начать писать CSS.
На этой странице здорово то, что мы можем окунуться в мир адаптивной рекламы. Мир рекламы действительно не догнал адаптивный дизайн. Объявления часто имеют фиксированный размер, и их изменение сложно или прямо запрещено. На этом сайте это не так, потому что я сам создаю рекламу.
Каждое объявление создается из фонового изображения, изображения логотипа и фрагментов текста. Используя background-imageсредства, мы можем обрезать его края, и это нормально. Мы не теряем ни текста, ни важных частей логотипа.
Планировка этой «стены» будет настенной =). У нас будет три столбца при широких размерах рабочего стола, затем опустимся до двух столбцов и, наконец, до одного столбца при размерах телефона. Все, что мы делаем, это перемещаем объявления и применяем, min-heightчтобы все они оставались одинаковой высоты. При разных медиа-запросах мы просто настраиваем ширину рекламных объявлений и меняем, какие из них имеют правое поле, а какие нет (через :nth-child).
На задней панели каждое объявление представляет собой настраиваемое поле в WordPress. Когда мы выводим их на страницу, мы сначала запрашиваем их и помещаем в массив. Затем перемешайте этот массив. Затем, наконец, повторить их. С таким же успехом можно дать всем шанс стать топовой рекламой!