gpt4 book ai didi

html - CSS:在英雄图片上方制作 float 导航栏的最佳方式?

转载 作者:行者123 更新时间:2023-12-05 06:59:51 25 4
gpt4 key购买 nike

<分区>

这可能是以前以不同的方式提出的,但我找不到任何具体的答案。

我想要一个导航栏,它在普通页面上位于页面内容之上,而在带有英雄图片的页面上看起来像是在页面内容内。

我通常使用 Jinja2 模板(用于 Django),因此手动将导航栏放入页面内容没有多大意义。

我目前使用负边距来执行此操作,但感觉有点老套(下面的结帐代码)

编辑:第二个导航栏(导航栏背景在英雄背景后面,但导航栏文本在英雄背景前面)是我想要的样子。

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial;
}

:root {
--primary: #21abde;
--navbar-height: 50px;
}

.navbar {
height: var(--navbar-height);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #333;
border: 1px solid grey;
color: white;
}

.navbar ul {
list-style: none;
display: flex;
}

.navbar ul a {
padding: 10px;
color: white;
text-decoration: none;
transition: .2s ease;
}

.navbar ul a:hover {
color: var(--primary);
}

.content,
.hero {
display: flex;
justify-content: center;
align-items: center;
}

.content {
background: darkcyan;
height: calc(100vh - var(--navbar-height));
}

.hero {
background: darkorange;
margin-top: calc(-1*var(--navbar-height));
height: 100vh;
}
<nav class="navbar">
<div class="logo">Navbar 1</div>
<div class="nav-menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</nav>
<div class="content">
Content
</div>
<nav class="navbar">
<div class="logo">Navbar 2</div>
<div class="nav-menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</nav>
<div class="hero">
Hero
</div>

有没有更好的方法来做到这一点,或者这是唯一不涉及手动将导航栏包含到页面内容中的方法(因为我觉得除了静态之外,这对其他任何东西都没有多大意义导航栏)?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com