我在网上进行了研究，并完成了它所说的所有内容。我删除了所有不必要的div等。我想知道是否还有其他建议。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
padding: 0;
margin: 0;
}
.navigation-bar {
width: 100%;
height: 53px; /
background-color: black;
}
.logo {
display: inline-block;
vertical-align: top;
height: 50px;
margin-left: 30px;
margin-top: 2px;
}
.navigation-bar> a {
float:right;
display: inline-block;
vertical-align: top;
margin-right: 25px;
height: 60px;
color: white;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
}
.navigation-bar> a:hover:before {
content: "";
position: absolute;
top: 40px;
left: 50%;
margin-left: -5px;
width: 0px;
height: 7px;
xxmargin: 0px auto;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
}
</style>
</head>
<body>
<nav class="navigation-bar">
<img class="logo" src="C:UserssahanDownloadslogo.png">
<a href="#">Contact</a>
<a href="#">Us</a>
<a href="#">Work</a>
<a href="#">Home</a>
</nav>
我也得到了水平滚动条。我不应该使用溢出隐藏属性。否则我如何停止水平滚动条？
改进：
- 你应该关闭你的html和body标签
</body>
</html>
- 如果你想关注细节，如果img和nav项目在同一个选项卡上会更好
- 你不应该在导航中包含你的标志。正确的语义顺序是
<header>
<img> // this could be in a div for branding
<nav>
<a>Menu item</a> // your nav should only contain your nav links
</nav>
</header>
- 最好将样式放在外部样式表中，您可以使用
<link rel="stylesheet" src="filename.css" />
<head>元素中需要一个<title>标记
我还想添加一些通用指针。为选项卡选择一定数量的空格，并保持一致。因此，如果您选择2个空格作为选项卡，请始终在CSS中为每个缩进使用2个空格。
额外：我在你的CSS中看到了xxmargin，这不是一件事。
在html结构中，如果要将nav元素用作网站的顶部导航栏，则应将其设置到header标记中。然后设置main，最后设置footer
为什么将样式表与html代码放在同一个页面中？我给你的建议是制作两个不同的页面，在你的html代码中使用
<link href="link to your css page" rel="stylesheet" type="text/css">
当你为一个网站创建几个页面时，这将是更实际的做法。