У цьому остаточному скрінкасті з побудови нижнього колонтитулу ми працюємо над нижнім колонтитулом, де знаходяться області CodePen та ShopTalk.
Нам доведеться трохи змінити HTML, оскільки прийшли до усвідомлення того, що чотири фрагменти внизу (логотип, текст, логотип, текст) мали б сенс представляти собою ряд вбудованих елементів блоків, які центрировані один на одному ( vertical-align: middle;).
Ми стикаємося з проблемою, коли між елементами вбудованого блоку є зайвий простір, тому ми використовуємо розмір шрифту: 0; фокус із цієї статті.
Зрештою ми отримуємо макет, але ви насправді не бачите, як я потрапляю на реальні зображення. Як і ми з Photostar, я створюю новий файл Photoshop саме для цих логотипів нижнього колонтитула. Це просто полегшує роботу з ними та спрощує подальші оновлення цих логотипів. Я також роблю їх удвічі більшими та зменшую, щоб вони добре виглядали на дисплеях Retina. Я поміщаю їх у теги заповнювачів зображень, які ми маємо, і це чудово працює.
Файли
- 74-нижній колонтитул Logos.psd.zip