在这个屏幕录制中，我们将深入探讨Deals部分。Deals 部分本质上是一个“广告墙”。它是网站的一个区域，人们需要自己导航到那里，所以我不用担心把广告塞到人们的脑海里。此外，每个广告都有折扣，并且是我个人推荐的产品，所以没有任何欺骗行为。
我们已经有了头部。我们也已经有了需要设置样式的内容输出到页面上。这是一个完美的地方，可以立即开始编写一些 CSS。
这个页面的酷点在于，我们可以涉足响应式广告的世界。广告界还没有赶上响应式设计的步伐。广告通常是固定尺寸的，调整大小很困难或完全禁止。在这个网站上情况并非如此，因为我自己创建广告。
每个广告都是由背景图像、徽标图像和一些文本创建的。使用background-image意味着我们可以稍微裁剪它的边缘，这是可以的。我们不会丢失任何文本或徽标的重要部分。
这个“墙”的布局将像墙一样=)。在宽桌面尺寸下，我们将使其为三列，然后缩减到两列，最后在手机尺寸下缩减到一列。我们所做的只是使广告浮动并应用min-height以使它们保持相同的高度。在不同的媒体查询中，我们只需调整广告的宽度并更改哪些广告具有右边距以及哪些没有（通过:nth-child）。
在后端，每个广告都是 WordPress 中的一个自定义字段。当我们将它们输出到页面上时，我们首先查询它们并将它们放入数组中。然后打乱该数组。最后将它们输出。不妨让每个人都有公平的机会成为顶部广告！