<分区>
您好,我正在尝试删除导航栏和标题之间的空白区域。但是,正文的边距和填充已经设置为 0,我已经为整个文档设置了它 (*)。 此外,我正在尝试使导航栏具有粘性。滚动并停留在文档的顶部,一旦您滚动到初始顶部:0。 我已经按照在线教程进行操作,但没有用...
我正在尝试创建的网站类似于 Mineplex.com,这是一个流行的 Minecraft 网站。 但出于某种原因,标题和导航栏之间存在空白,并且导航栏没有保持粘性。
有人可以帮助我或指出正确的方向吗,因为我非常困惑。
body {
height: 5048px;
/* background-color: #f1f1f1; */
padding: 0;
margin: 0;
}
.header--main {
height: 300px;
background-color: purple;
}
nav {
width: 100%;
height: 50px;
/* background-image: linear-gradient(to bottom, #4c45b2, #25accf);*/
background-color: red;
position: -webkit-sticky;
top: 0;
}
nav ul {
text-align: center;
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
display: block;
padding: 14px 28px;
font-size: 16px;
color: white;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
}
nav ul li a:active {
background-color: white;
color: #484848;
}
nav ul li a:hover {
background-color: white;
color: #484848;
}
/*Make navbar font to open sans*/
<header>
<div class="header--main">
</div>
<nav class="sticky">
<ul>
<li><a href=”./index.html”>Home</a></li>
<li><a href=”#”>Registration</a> </li>
<li> <a href=”#”>Order</a></li>
<li> <a href=”#”>Features</a></li>
</ul>
</nav>
</header>
<article>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</article>