如何解决HTML 和 CSS 中的导航栏选项卡
我正在尝试设计我正在构建的网站的导航栏。我包含了下面的代码，但我不知道如何让导航栏选项看起来像一个文件夹选项卡。看这张图片：
我不明白如何使用 HTML 和 CSS 做到这一点。我目前拥有的是：
HTML
nav {
margin: 0px;
}
ul {
list-style-type: none;
color: lightskyblue;
background-color: royalblue;
font-family: Helvetica;
font-size: 180%;
margin: 0px;
}
li {
display: inline-block;
background-color: white;
padding-top: 2px;
border: 5px;
border-colour: red;
}
a {
display: block;
color: lightskyblue;
}
li a {
text-decoration: none;
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
li a:hover {
color: white;
background-color: lightskyblue;
text-decoration: none;
}<nav>
<ul>
<li>
<a class="active" href="http://www.google.com/ncr">Home</a>
</li>
<li> <a href="http://www.google.com/ncr">Full list of Articles</a></li>
<li> <a href="http://www.google.com/ncr">disciplines</a></li>
<li> <a href="http://www.google.com/ncr">More Resources</a></li>
<li> <a class="about" href="http://www.google.com/ncr">About Me</a></li>
</ul>
</nav>解决方法
在下面，我在主“ul”上创建了一个偏移量，并使用“top: -41px”和“position:relative”在其上方设置了“li”项。
然后，我使用 JavaScript 为每个列表项添加了事件侦听器，当鼠标悬停在其上时，'ul' 背景颜色会发生变化。
显然样式需要一些工作，但这是您应该尝试自己做的事情。
请看下面：
//event listeners for the 'hovers'
document.getElementById("firstitem").addEventListener("mouseover",function() {
document.getElementById("list").style.backgroundColor = "royalblue";
});
document.getElementById("seconditem").addEventListener("mouseover",function() {
document.getElementById("list").style.backgroundColor = "pink";
});
document.getElementById("thirditem").addEventListener("mouseover",function() {
document.getElementById("list").style.backgroundColor = "green";
});
document.getElementById("fourthitem").addEventListener("mouseover",function() {
document.getElementById("list").style.backgroundColor = "red";
});
document.getElementById("fifthitem").addEventListener("mouseover",function() {
document.getElementById("list").style.backgroundColor = "yellow";
});* {
margin: 0px;
padding: 0px;
}
nav {
margin: 0px;
}
ul {
list-style-type: none;
color: lightskyblue;
background-color: royalblue;
font-family: Helvetica;
font-size: 180%;
margin: 0px;
margin-top: 41px;
}
li {
display: inline-block;
background-color: white;
padding-top: 0px;
border: 5px;
top: -41px;
padding: 0px 5px;
position: relative;
border-color: red;
}
li:first-child {
background-color: royalblue;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: green;
}
li:nth-child(4) {
background-color: red;
}
li:nth-child(5) {
background-color: yellow;
}
a {
display: block;
color: rgb(108,162,196);
}
li a {
text-decoration: none;
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul id="list">
<li id="firstitem">
<a class="active" href="http://www.google.com/ncr">Home</a>
</li>
<li id="seconditem"> <a href="http://www.google.com/ncr">Full list of Articles</a></li>
<li id="thirditem"> <a href="http://www.google.com/ncr">Disciplines</a></li>
<li id="fourthitem"> <a href="http://www.google.com/ncr">More Resources</a></li>
<li id="fifthitem"> <a class="about" href="http://www.google.com/ncr">About Me</a></li>
</ul>
</nav>
<script src="scripts.js"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
