使用 CSS，我们可以轻松创建导航栏，即菜单。此外，链接可以左对齐或右对齐。我们将使用 flex 来实现相同的目的。让我们看看如何。
使用 <nav> 创建导航栏
<nav> 元素用于在网页上创建导航栏。链接设置在以下两者之间：
代码语言：javascript复制<nav>
<! -- set the div for links -->
</nav>导航栏，弯曲和位置固定
显示屏设置为弯曲。使用position属性的固定值固定位置：
代码语言：javascript复制nav {
display: flex;
position: fixed;
top:0;
width: 100%;
background-color: rgb(251, 255, 196);
overflow: auto;
height: auto;
}设置 Left Links 的 div
以下菜单链接位于网页的左侧：
代码语言：javascript复制<div class="left-links">
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
</div>为正确的链接设置 div
以下菜单链接位于网页的右侧：
代码语言：javascript复制<div class="right-links">
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</div>链接与 Flex 向左对齐
使用 flex 属性，将 Home、Login 和 Register 链接设置在左侧。左侧柔性项的初始长度设置为 200px：
代码语言：javascript复制.left-links{
flex:1 1 200px;
}以下是创建具有左对齐和右对齐链接的导航栏的代码：
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body{
margin:0px;
margin-top:60px;
padding: 0px;
}
nav{
display: flex;
position: fixed;
top:0;
width: 100%;
background-color: rgb(251, 255, 196);
overflow: auto;
height: auto;
}
.left-links{
flex:1 1 200px;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 17px;
font-weight: bolder;
}
.links:hover {
border-bottom: 2px solid purple;
}
.selected{
border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
</div>
<div class="right-links">
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</div>
</nav>
<h1>Hover on the above links</h1>
</body>
</html>
