Trong màn hình cuối cùng về việc xây dựng chân trang này, chúng tôi làm việc ở chân trang dưới cùng, nơi có các khu vực CodePen và ShopTalk.
Chúng tôi phải thay đổi HTML một chút khi nhận ra rằng bốn phần dọc theo phía dưới (biểu tượng, văn bản, biểu trưng, văn bản) sẽ có ý nghĩa là một loạt các phần tử khối nội tuyến được căn giữa vào nhau ( vertical-align: middle;).
Chúng tôi gặp phải vấn đề trong đó có thêm không gian giữa các phần tử khối nội tuyến, vì vậy chúng tôi sử dụng font-size: 0; lừa từ bài viết này.
Cuối cùng thì bố cục của chúng tôi cũng hoạt động, nhưng bạn không thực sự thấy tôi thả những hình ảnh thật. Giống như chúng ta đã làm với Photostar, tôi tạo một tệp Photoshop mới chỉ dành cho các logo ở chân trang này. Điều này chỉ giúp bạn dễ dàng xử lý và cập nhật các logo này trong tương lai dễ dàng hơn. Tôi cũng làm cho chúng có kích thước gấp đôi và thu nhỏ lại để chúng trông đẹp trên màn hình Retina. Tôi thả chúng vào các thẻ hình ảnh giữ chỗ mà chúng tôi có và nó hoạt động tốt.
Các tập tin
- 74-Footer Logos.psd.zip