Dalam screencast akhir membina footer ini, kami mengusahakan footer bawah di mana kawasan CodePen dan ShopTalk berada.
Kita harus mengubah HTML sedikit demi sedikit ketika menyedari bahawa keempat-empat potongan di bahagian bawah (logo, teks, logo, teks) masuk akal untuk menjadi rangkaian elemen blok sebaris yang berpusat pada satu sama lain ( vertical-align: middle;).
Kami menghadapi masalah di mana terdapat ruang tambahan antara elemen blok sebaris sehingga kami menggunakan ukuran fon: 0; helah dari artikel ini.
Kami membuat susun atur berfungsi pada akhirnya, tetapi anda sebenarnya tidak melihat saya meletakkan gambar sebenar. Seperti yang kami lakukan dengan Photostar, saya membuat fail Photoshop baru hanya untuk logo footer ini. Ini menjadikannya lebih mudah untuk ditangani dan kemas kini logo yang akan datang lebih mudah. Saya juga menjadikannya berukuran 2x dan mengecilkannya sehingga kelihatan bagus pada paparan Retina. Saya meletakkannya di tag gambar placeholder yang kami ada dan ia berfungsi dengan baik.
Fail
- 74-Footer Logos.psd.zip