我需要帮助,这是我的代码。我已经完成了登录页面所需的操作,但无法使导航栏粘在顶部,它只是悬挂在屏幕中间上方。
不知道如何处理 flex,或者在这个例子中 flex 有问题,还是什么?我已经尝试了位置相对,绝对,灵活的开始结束,一切,我几乎筋疲力尽。找不到解决方案。
这是截图视图
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
color: #99b525;
line-height: 1.6;
}
#showcase {
background-image: url('img/lap-top.jpeg');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0.9;
padding: 0 20px;
text-shadow: -2px 3px 2px #666;
text-align: center;
}
#showcase h1 {
font-size: 50px;
line-height: 1.2;
}
#showcase p {
font-size: 20px;
}
#showcase .header .button {
font-size: 18px;
text-decoration: none;
padding: 10px 20px;
margin-top: 20px;
border: 1px solid #777;
border-radius: 15px;
color: #a3bd3b;
-webkit-transition: background-color 0.8s ease-out;
-moz-transition: background-color 0.8s ease-out;
-o-transition: background-color 0.8s ease-out;
transition: background-color 0.8s ease-out;
}
#showcase .header .button:hover {
background: #a3bd3b;
color: #fff;
text-shadow: none;
}
.header {
border: 3px solid #7c9c28;
border-radius: 50px 25px 50px 25px;
padding: 25px;
background: #232323ad;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*---------------------------------------------------*/
nav {
width: 100%;
height: 60px;
background-color: transparent;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
padding: 0px 4em;
}
nav ul li a {
font-family: Arial;
color: #222;
font-size: 20px;
padding: 24px 14px;
text-decoration: none;
}
<header id="showcase">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="header">
<h1>Welcome to the beach</h1>
<p>Lorem ipsum dolar sit anet, amat der is tlen af serf nsajs jsiqo msnf kaiwks.</p>
<a href="#" class="button">Read More</a>
</div>
</header>
如何做到这一点?
尝试删除 #showcase 高度。如果你想要粘性菜单试试
position:fixed;
您的合理内容"中心"导致了问题,因为它试图将所有内容推到中间。
如果您坚持使用 flexbox 方法(并且取决于您希望网页的其余部分的位置(,您可以将其更改为 flex-start(以便所有内容都移动到页面顶部(。
#showcase {
background-image: url('img/lap-top.jpeg');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center; /* change to flex-start */
opacity: 0.9;
padding: 0 20px;
text-shadow: -2px 3px 2px #666;
text-align: center;
}
但是,假设您希望您的内容"欢迎来到海滩"在中间,我个人的解决方案是将其添加到您的导航样式中:
nav {
position:fixed;
top:0;
}