我在让当前班级工作时遇到问题。我希望当前页面的<nav>
按钮是不同的颜色。我已经尝试了各种不同的方法来解决这个问题。我可以让文字改变颜色而不是背景颜色。这就是我所拥有的:
HTML
<nav>
<ul id="navlist">
<li><a class="current" href="index.html"> Home </a></li>
<li><a href="history.html"> Beer History </a></li>
<li><a href="brews.html"> Brews </a></li>
<li><a href="recipe.html"> Recipes </a></li>
<li><a href="about.html"> About Us </a></li>
<li><a href="contact.html"> Contact Us </a></li>
</ul>
</nav>
CSS
li.current a{
border: 2px solid #413B02;
padding: 10px;
text-decoration:none;
color: green;
background-color: #FFF;
}
nav{
list-style-type:none;
color: white;
font-size: 19px;
height: 40px;
line-height: 40px;
text-align:center;
font-family: "cinzelregular", Geneva, sans-serif;
padding: 30px;
}
li{
display:inline;
margin: 0;
}
ul#navlist a:link,a:visited{
background: linear-gradient(180deg,#E6E7E8, #654C36, #3D2210,#3D2210);
border: 2px solid #413B02;
padding: 10px;
text-decoration:none;
color: #FFF;
}
ul#navlist a:hover, a:active{
background: linear-gradient(180deg,#E6E7E8, #AA7A4C, #D36700);
border: 2px solid #413B02;
padding: 10px;
text-decoration:none;
color: black;
}
请帮忙。我完全迷失了。
答案 0 :(得分:0)
HTML
<nav>
<ul id="navlist">
<li><a class="current" href="index.html"> Home </a></li>
<li><a href="history.html"> Beer History </a></li>
<li><a href="brews.html"> Brews </a></li>
<li><a href="recipe.html"> Recipes </a></li>
<li><a href="about.html"> About Us </a></li>
<li><a href="contact.html"> Contact Us </a></li>
</ul>
</nav>
CSS
li a.current{
border: 2px solid #413B02;
padding: 10px;
text-decoration:none;
color: green;
background-color: #FFF;
}
这将是工作
但如果你做这样的话,我会更喜欢
HTML
<nav>
<ul id="navlist">
<li class="current"><a href="index.html"> Home </a></li>
<li><a href="history.html"> Beer History </a></li>
<li><a href="brews.html"> Brews </a></li>
<li><a href="recipe.html"> Recipes </a></li>
<li><a href="about.html"> About Us </a></li>
<li><a href="contact.html"> Contact Us </a></li>
</ul>
</nav>
CSS
#navlist li a {
padding: 10px;
text-decoration: none;
color: #fff;
background: green;
}
#navlist li.current a {
background: #fff;
color: green;
}