所以我只使用 html 和 css （没有 JQuery）制作导航栏，我注意到应用字体样式的 css 只影响左侧的“TAC”，而不影响右侧的元素。此外，我需要让每个单词（它们在列表中）之间有一个空格，它们位于同一个 div 类中。我的代码在图片下方 <!DOCTYPE html><html> <head> <title>The Accounting Centre</title> <link rel="icon" type="image/png" href="TAC.png" sizes="16x16"> <style> body{ padding: 0; margin: 0;} .navbar{ position: fixed; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; background-color:#d4d7de; width: 100%; height:70px; z-index: 1; } .nav{ display: flex; justify-content: right; list-style: none; margin:15px; color:#000; text-decoration: none; text-transform: uppercase; } .logo { flex: 1 1 auto; margin-left: 10%; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; font-size:35px; margin:15px; color:#000; text-decoration: none; text-transform: uppercase;} </style> </head> <body> <div class="navbar"> <a href="#" class="logo">TAC</a> <ul class="nav"> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#services">Our Services</a></li> <li><a href="#info">Who We Are</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact us</a></li> </ul> </div> <div class="banner-area" id="home"l</div> <div class="about-area" id="about"</div> <div class="services-area" id="services"</div> <div class="info-area" id="info"</div> <div class="testimonials-area" id="testimonials"</div> <div class="contact-area" id="contact"</div> </body></html>
2 回答
慕桂英4014372
TA贡献1871条经验 获得超13个赞
“a”元素具有您需要覆盖的初始样式。
此外，您还需要修复 HTML。id="home" 之后有一个错误的“1”，您需要添加“>”来关闭打开的 div 元素。
尝试这个：
<head>
<title>The Accounting Centre</title>
<link rel="icon" type="image/png" href="TAC.png" sizes="16x16">
<style>
body{
padding: 0;
margin: 0;
}
.navbar{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
background-color:#d4d7de;
width: 100%;
height:70px;
z-index: 1;
}
.nav {
display: flex;
justify-content: right;
list-style: none;
margin:15px;
}
.nav a {
color:#000;
text-decoration: none;
text-transform: uppercase;
padding: 0 1rem;
}
.logo {
flex: 1 1 auto;
margin-left: 10%;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size:35px;
margin:15px;
color:#000;
text-decoration: none;
text-transform: uppercase;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<div class="navbar">
<a href="#" class="logo">TAC</a>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</a></li>
<li><a href="#info">Who We Are</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
<div class="banner-area" id="home"></div>
<div class="about-area" id="about"></div>
<div class="services-area" id="services"></div>
<div class="info-area" id="info"></div>
<div class="testimonials-area" id="testimonials"></div>
<div class="contact-area" id="contact"></div>
</body>
</html>
- 2 回答
- 0 关注
- 99 浏览
添加回答
举报
0/150
提交
取消