У цьому скрінкасті ми розглянемо розділ "Угоди". Розділ "Угоди" - це, по суті, "стіна реклами". Це частина веб-сайту, до якої людям доводиться переходити самостійно, тому я не переживаю, що заважатимуть рекламу. Крім того, кожна реклама має знижку на неї і є продуктом, який я особисто рекомендую, тому ніяких тіньових ситуацій не відбувається.
У нас вже є заголовок на місці. У нас також є вміст, який виплювається на сторінку, яку нам потрібно оформити. Це ідеальне місце для того, щоб розпочати безпосередньо написання деяких CSS.
Що цікаво на цій сторінці, так це те, що ми можемо занурити пальці у світ адаптивної реклами. Світ реклами справді не наздогнав чуйного дизайну. Оголошення часто мають фіксований розмір, і їх розмір важко або заборонено прямо вгору. На цьому веб-сайті це не так, оскільки рекламу я створюю сам.
Кожне оголошення створюється із фонового зображення, зображення логотипу та бітів тексту. За допомогою background-imageзасобу ми можемо обрізати його краї, і це нормально. Ми не втрачаємо жодного тексту чи важливих частин логотипу.
Макет цієї "стіни" буде схожий на стіну =). Ми матимемо це три стовпці із широкими розмірами робочого столу, а потім опустимось до двох стовпців, а потім, нарешті, один стовпець із телефонними розмірами. Все, що ми робимо, - це розмістити рекламу та застосувати, min-heightщоб зберегти їх на однаковій висоті. Під час різних медіа-запитів ми просто регулюємо ширину оголошень і змінюємо, які з них мають правильне поле, а які ні (через :nth-child).
На задній стороні кожне оголошення - це спеціальне поле в WordPress. Коли ми виводимо їх на сторінку, ми спочатку запитуємо їх і поміщаємо в масив. Потім перетасуйте цей масив. Тоді нарешті повторіть їх. Можливо, також дамо всім чесний удар, щоб бути найкращою рекламою!