CSS - 风格类似于GOOD?

发布于 2024-11-28 15:47:34 字数 206 浏览 1 评论 0原文

我经常访问一个名为 GOOD 的网站,并且我特别喜欢一种审美风格;导航栏如何将其颜色延伸到网站的背景上。如果您访问该网站,您就会明白我的意思。

在CSS中,我怎样才能以最简单的方式复制这个?我已经尝试过使用 z-index/margins/float 进行各种操作,但它根本没有发生。

I frequent a website called GOOD and I love one aesthetic style in particular; how the navigation bar extends its colours across the background of the website. You'll see what I mean if you visit the site.

In CSS, how could I replicate this in the most simply way possible? I've tried all sorts of things with z-index/margins/float and it simply isn't happening.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦在夏天 2024-12-05 15:47:34

只需将一个 div(绝对位置)放在后面,其中包含菜单,然后放置另一个 div,将实际内容放在上面。

小例子:

<html>
<body>
<div style="position: absolute; top:200px; left:0px; width:100%">The menu here, at A 100% width</div>
<div style="position: absolute; top:0px; left: 0px;">The content here.</div>
</body>
</html>

那应该可行!

希望有帮助。

Just put A div (position'd absolute) in the back with the menu in it and put another div, with the actual content in it over that.

Little example:

<html>
<body>
<div style="position: absolute; top:200px; left:0px; width:100%">The menu here, at A 100% width</div>
<div style="position: absolute; top:0px; left: 0px;">The content here.</div>
</body>
</html>

That should work!

Hope that helps.

以酷 2024-12-05 15:47:34

这一切都与位置有关:绝对。保存所有这些链接的导航容器被赋予了这个 CSS 属性,该属性将其从页面的正常流程中删除。它有 top: 165px 来设置它的位置。每个链接都被赋予了 display: block 属性,这意味着它们将填充其父链接,在本例中为宽度的 100%。然后在 100% 宽度链接内使用 span 标记来将文本设置在其所在位置。

Its all about position: absolute. The nav container which holds all of those links is given this CSS property which removes it from the normal flow of the page. It has top: 165px to set it where it is positioned. Each of the links are given the display: block property which means they will fill their parent which in this case is 100% of the width. A span tag is then used inside the 100% width links to set the text where it is.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文