在Visual代码上创建一个组合
在Visual代码上创建一个组合
提问于 2022-04-20 01:09:45
你好，我正在尝试使用HTML、CSS和Javascript创建一个组合。我以前唯一的经验是做一个基本的网站与标准文本和一个轻\黑暗的主题按钮。我正在尝试使我的标题be在我的导航栏左边，我的目录位于导航栏的左侧。有人能解释一下我会怎么做吗。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .maxwidth{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2022-04-20 01:18:58
你做得很对。你的css有一个错误。我把maxwidth改成了max-width。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71933009
复制相关文章
相似问题
腾讯云开发者
