我正在制作一个评论网站,并且我遵循了导航栏上的教程。导航栏是响应式的。但是,我需要添加和编辑它的一些元素,但我不知道如何做。我想将我的导航栏分成 3 个元素,我的徽标在左边,我的网站页面/项目在中间,登录和注册在右边。我已经在下面包含了所有的 html 和 css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
color: white;
}
body {
font-family: "Poppins", sans-serif;
--colour1: #fff;
--colour2: #1b2735;
}
.nav-bar {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
list-style: none;
position: relative;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
padding: 12px 20px;
z-index: 1;
}
.logo img {
width: 60px;
}
.menu {
display: flex;
float: right;
}
.menu li {
padding: 30px;
}
.menu li a {
display: inline-block;
text-decoration: none;
color: white;
text-align: center;
transition: 0.15s ease-in-out;
position: relative;
text-transform: uppercase;
}
.menu li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background-color: white;
transition: 0.15s ease-in-out;
}
.menu li a:hover:after {
width: 100%;
}
.open-menu {
position: absolute;
columns: white;
cursor: pointer;
font-size: 1.5rem;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: none;
}
.close-menu {
position: absolute;
columns: white;
cursor: pointer;
font-size: 1.5rem;
top: 20px;
right: 20px;
display: none;
}
#check {
display: none;
}
@media(max-width: 610px) {
.menu {
flex-direction: column;
align-items: center;
justify-content: center;
width: 80%;
height: 100vh;
position: fixed;
top: 0;
right: -100%;
z-index: 100;
background-color: var(--colour2);
transition: all 0.2s ease-in-out;
}
.menu li {
margin-top: 40px;
}
.menu li a {
padding: 10px;
}
.open-menu,
.close-menu {
display: block;
}
#check:checked~.menu {
right: 0;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<header>
<nav>
<ul class="nav-bar">
<li class="logo">
<a href="#"><img src="youreview_logo.png" alt="logo"></a>
</li>
<input type="checkbox" id="check">
<span class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<label for="check" class="close-menu"><i class="fas fa-times"></i></label>
</span>
<label for="check" class="open-menu"><i class="fas fa-bars"></i></label>
</ul>
</nav>
</header>
别担心,欢迎!这是代码的更新版本,用于获取您描述的布局:
HTML(我添加了一个带有登录注册类的 div 来包含登录和注册链接):
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
color: white;
}
body {
font-family: "Poppins", sans-serif;
--colour1: #fff;
--colour2: #1b2735;
}
.nav-bar {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
list-style: none;
position: relative;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
padding: 12px 20px;
z-index: 1;
}
.logo img {
width: 60px;
}
.center-menu {
display: flex;
align-items: center;
}
.menu {
display: flex;
}
.menu li {
padding: 30px;
}
.menu li a {
display: inline-block;
text-decoration: none;
color: white;
text-align: center;
transition: 0.15s ease-in-out;
position: relative;
text-transform: uppercase;
}
.menu li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background-color: white;
transition: 0.15s ease-in-out;
}
.menu li a:hover:after {
width: 100%;
}
.open-menu {
position: absolute;
columns: white;
cursor: pointer;
font-size: 1.5rem;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: none;
}
.close-menu {
position: absolute;
columns: white;
cursor: pointer;
font-size: 1.5rem;
top: 20px;
right: 20px;
display: none;
}
.login-register {
display: flex;
align-items: center;
}
.login-register li {
padding: 0 10px;
}
#check {
display: none;
}
@media(max-width: 610px) {
.menu {
flex-direction: column;
align-items: center;
justify-content: center;
width: 80%;
height: 100vh;
position: fixed;
top: 0;
right: -100%;
z-index: 100;
background-color: var(--colour2);
transition: all 0.2s ease-in-out;
}
.menu li {
margin-top: 40px;
}
.menu li a {
padding: 10px;
}
.open-menu,
.close-menu {
display: block;
}
#check:checked~.menu {
right: 0;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<header>
<nav>
<ul class="nav-bar">
<li class="logo">
<a href="#"><img src="youreview_logo.png" alt="logo"></a>
</li>
<div class="center-menu">
<input type="checkbox" id="check">
<span class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<label for="check" class="close-menu"><i class="fas fa-times"></i></label>
</span>
<label for="check" class="open-menu"><i class="fas fa-bars"></i></label>
</div>
<div class="login-register">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</div>
</ul>
</nav>
</header>
您可以做的是将徽标、导航栏链接和登录名分开,并在不同的 div 中注册,并使用 css 中的 width 元素为它们提供相等的间距。有点像这样:
html:
<!-- Navbar code -->
<div class="logo-spacing">
<!-- your logo -->
</div>
<div class="pages-spacing">
<!-- your page links -->
</div>
<div class="login-spacing">
<!-- your login/register links -->
</div>
<!-- navbar closing code -->
CSS:
.logo-spacing {
width: 33%
}
.pages-spacing {
width: 33%
}
.login-spacing {
width: 33%
}
还没有测试过,但这希望有帮助。 另一种方法是使用 bootstrap 5 网格,此链接有更多信息:https://getbootstrap.com/docs/5.2/layout/grid/#grid-options