我试图通过为我的页面制作导航栏来练习我的 HTML5 和 CSS3 技能，但我遇到了很多麻烦。我正在尝试使用 HTML5 语义标签来制作它，但它们都没有按照我想要的方式显示，这是一个巨大的定位混乱。有人可以告诉我如何制作一个功能性导航栏吗？
这是我的整个导航栏和标题的 HTML 代码：
body {
margin:0;
}
#nav-plus-head-wrapper {
background: blue;
height: 100px;
position: absolute;
top: 0px;
left:0px;
right:0px;
}
#topheader {
}
#topnav {
background: yellow;
position: relative;
top: 0px;
right: 0px;
}
.navli {
display: inline;
}
a:link {
text-decoration: none;
color: red;
}
a:hover {
text-decoration: none;
color: orange;
}
a:visited {
text-decoration: none;
color: white;
}<section id="nav-plus-head-wrapper">
<!--CODE FOR WEBSITE NAME-->
<header id="topheader">
<h1>Site</h1>
</header>
<!--CODE FOR TOP NAVBAR-->
<nav id="topnav">
<ul id="topnav-ul">
<li class="navli"><a href="">Home</a></li>
<li class="navli"><a href="">About</a></li>
<li class="navli"><a href="">Services</a></li>
<li class="navli"><a href="">Contact</a></li>
</ul>
</nav>
</section>制作功能性导航栏的方法不止一种。您可以使用按钮、div、链接、列表，甚至可以是它们的组合。我通常用最简单的方法。
这里有一个简单的方法和简单的代码，您可以检查和阅读以从中学习。
我希望这会有所帮助。
* {
scroll-behavior: smooth;
margin: 0;
padding: 0;
text-decoration-line: none;
scroll-padding-top: 100px;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background: #666699;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.navbar {
width: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.navBtn {
width: 80px;
height: 40px;
margin: 0 10px;
font-size: 20px;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.navBtn a {
color: #000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.section {
width: 100%;
height: 90vh;
z-index: -1;
display: flex;
color: white;
font-size: 40px;
justify-content: center;
align-items: center;
align-content: center;
}
.homeSect {
background: #0066ff;
margin-top: 100px;
height: 100vh;
}
.workSect {
background: #33cc33;
}
.aboutSect {
background: #ffcc00;
}</head>
<header class="header" id="header">
<nav class="navbar">
<button class="navBtn homeBtn" id="homeBtn">
<a href="#homeSect">Home</a>
</button>
<button class="navBtn workBtn" id="workBtn">
<a href="#workSect">Work</a>
</button>
<button class="navBtn aboutBtn" id="aboutBtn">
<a href="#aboutSect">About</a>
</button>
</nav>
</header>
<body class="body">
<div class="onscrolldiv" id="onscrolldiv"></div>
<section class="homeSect section" id="homeSect">Home section</section>
<section class="workSect section" id="workSect">Work section</section>
<section class="aboutSect section" id="aboutSect">About section</section>首先你需要像这样重置所有的 html：
*, *:after, *:before {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
然后你将
<header id="topheader">#topheader {
float:left;
color:white;
}
而你
<nav id="topnav">#topnav {
position: relative;
top: 20px;
float:right;
}
现在你可以像这样设置你的项目了
.navli {
float:left;
list-style:none;
width:24%;
height:100%;
padding:20px;
margin:0 0 0 1%;
background-color:#ccc;
}