在本期关于构建页脚的最后一段视频中,我们将处理页脚底部包含 CodePen 和 ShopTalk 区域的部分。
我们必须稍微修改一下 HTML 代码,因为我们意识到底部四个部分(徽标、文本、徽标、文本)最好是一系列相互居中的内联块元素(vertical-align: middle;
)。
我们遇到了内联块元素之间出现额外间距的问题,因此我们使用了来自 这篇文章 的 font-size: 0;
技巧。
我们最终实现了布局,但你并没有看到我实际插入真实的图像。就像我们之前处理 Photostar 一样,我为这些页脚徽标新建了一个 Photoshop 文件。这样做只是便于处理,并且在将来更新这些徽标时更方便。我还将它们的大小设置为 2 倍并缩小比例,这样它们在视网膜显示屏上看起来更好。我将它们放到我们已经存在的占位符图像标签中,效果非常好。