html - 为什么导航栏不在网站顶部？

问题描述

我目前正在通过创建一个简单的网站来练习 html 和 css。

我的问题是我不能将导航栏放在网站上方。我认为问题在于标题或背景视频。这是更多细节的图片。点击这里

我认为当导航栏被解决时，游戏段落将在自己的位置上。

现在这是我的 html 和 css 代码。

body{
    background: rgba(236,232,225,255);
    color: #333;
    font-family: helvetica;
    font-size: 15px;
    line-height: .5cm;
    
    margin: 0;
    padding: 0;
}

/* links configuration here */
a:link{
    text-decoration: none;
    color:rgba(216, 108, 108, 0.932);
}

a:hover{
    color: blue;
}
/* links configuration ends here */

#webname{ /* heading here */
    padding-top: 15%;
    padding-bottom: 15%;
    
    text-align: center;
    font-size: 150px;
    font-family: VALORANT;
    color:white;
}

#navname{ /* navigation bar name */   
    font-size: 75px;
    font-family: VALORANT;
    color: rgba(216, 108, 108, 0.932);

    float: left;
    padding-left: 30px;

    -webkit-text-fill-color: rgba(216, 108, 108, 0.932);
    -webkit-text-stroke: 1px white;
}

.navlinks li{ /* navigation links */
    display: inline;
    padding-right: 15px;
    font-family: Helvetica;
    font-weight: bold;

    float: right;
}

#videoBG{ /* background vid */
    position: absolute;
    right: 0; 
    bottom: 30%;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

@media (min-aspect-ratio: 16/9){
    #videoBG{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    #videoBG{
        width: auto;
        height: 100%;
    }
}

@media (max-width: 767px){
    #videoBG{
        display: none;
    }

    body {
        background: url('valoClip.png');
        background-size: cover;
    }
}

@font-face {
    font-family: 'VALORANT';
    src: url(fonts/Valorant\ Font.ttf);
    font-style: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Valorant</title>
    <link rel="stylesheet" href="Valorant.css">
</head>

<body>
    <!--Title-->
    <h1 id="webname">valoraNt</h1>
    <h1 id="navname">valoraNt</h1>
    
    <div class="wrapper">
        <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

    </div>

    <!--Navigation Bar here-->
    <nav id="navbar">
        <div class="container">
            <ul class="navlinks">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Gameplay</a></li>
                <li><a href="#">Guides</a></li>
            </ul>
        </div>
    </nav>
    
    <!--Gameplay here-->
    <div class="mainBody">
        
    <h3>GAMEPLAY</h3>
    
    <p>
    Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
    Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
    and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
    you'll need to think faster than your opponent if you want to survive. Take on foes across
    Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
    mode or tool to help you manage your aim.
    </p>
    
    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
    
</div>

我不确定某些代码的使用是否正确，但您也可以教我正确使用代码。感谢您的帮助：>

标签： htmlcssuinavigationbar

html - 为什么导航栏不在网站顶部？

问题描述

解决方案

推荐阅读