使用 CSS Grid 实现重叠头部

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

Snook 展示了一个经典的设计,顶部有一个超大的头部,内容区域“拉入”到头部区域。我的想法也一样

从历史上看,我一直使用负边距来实现这一点。头部有一个高度,在底部添加了很多填充,然后主体获得一个 margin-top: -50px 或设计所需的任何值。

如果您在这种情况下匹配marginpadding,它不完全是魔术数字,但对我来说感觉仍然不好,因为它们仍然是您需要在完全不同的元素之间保持同步的数字。

他的想法?使用 CSS Grid 构建它。 感觉确实更加稳健

巧合的是,我正在阅读陈慧静的 “黑色与橙色” 文章,并且该模式也出现在那里。

(我最终 对此制作了一个视频)。

直接链接 →