您好，我正在尝试创建自己的现有网站版本，但我似乎无法复制他们的标题，下面是我的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Poppins:400);
#logo {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-top: 1rem;
margin-left: 5rem;
margin-right: 1rem;
line-height: inherit;
white-space: nowrap;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
nav {
flex-grow: 1;
font-family: 'Poppins', sans-serif;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0 1vw;
}
.topnav {
background-color: #252323 !important;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: absolute;
padding: 1rem 1rem;
position: sticky;
width: 100%;
}
a{
color: white;
text-decoration:none;
font-size: 1.2rem;
}
.topnav #hover:hover {
background-color: #1F9BDE;
color: white;
transition: background-color 0.3s;
}
.topnav a.active {
color: orange;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}
.page{
padding: 0.2rem 1rem;
margin: 1% 1%;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Poppins;
font-weight: 400;
transition: background-color 0.3s ease;
}
.btn {
padding: 0.2rem 1rem;
margin: 1% 1%;
border: none;
background-color: orange;
color: #fff;
border-radius: 4px;
cursor: pointer;
font-family: Poppins;
font-weight: 400;
transition: background-color 0.3s ease;
}
</style>
</head>
<body>
<div class="topnav" id="topnav">
<a href="#"> <img id="logo" src="ActiveLearningLogo.png"> </a>
<nav>
<ul>
<li class="page" id="hover" style="float:right"><a href="#">Applicants</a></li>
<li class="page" id="hover" style="float:right"><a href="#">Accounts</a></li>
<li class="page" id="hover" style="float:right"><a href="#">Archives</a></li>
<li class="btn" id="hover" style="float:right"><a href="#">Sign Out</a></li>
</ul>
</nav>
</div>
</body>
</html>
这是最小化时的样子
这是原来的
我刚刚开始学习 HTML 和 CSS，所以我对其中的大部分内容都是新手，但我确实希望有人可以提供帮助
您应该具体说明您到底想要什么？您的 CSS 代码包含很多错误。您应该过滤您的 CSS 代码。我建议你好好看看代码，尝试找出错误，以便正确学习。您使用了不必要的 Flex，多次定位相同的 HTML 元素等。如果您只想在屏幕宽度低于 600px 时隐藏导航菜单栏，只需通过定位导航栏使用 display:none 即可。
