Question

这让我疯了。我已经在其他问题中尝试了所有关于此问题的建议，它只是不起作用。

我需要更改导航栏的背景颜色。我不想在编辑器部分（Wordpress）中更改CSS。我一直在尝试在编辑CSS部分完成它。

#nav {
    position: relative;
    left: -90px;
}

nav > ul {margin: 40}

这就是我到目前为止（它一直在工作，它是我想要的导航栏的中心，并在标题和导航栏之间设置了一个边距）。有什么我可以添加到这个来改变背景的颜色（然后我也需要改变字体的颜色..）

Answer 1

嗯，你的意思是这样吗？

CSS：

#nav {
    position: relative;
    left: -90px;
    background-color: #7777777; /*Whatever color you want goes here, but in Hexadecimal form*/
}

并且，对于字体颜色：

#nav {
    position: relative;
    left: -90px;
    background-color: #7777777; /*Whatever color you want goes here, but in Hexadecimal form*/
    color: #1122cc; /*The color of your font also goes here, but in hexadecimal form*/
}

请参阅以下链接以获取更多参考：

http://www.w3schools.com/cssref/pr_background-color.asp http://www.w3schools.com/cssref/pr_text_color.asp

颜色

http://www.w3schools.com/cssref/css_colors.asp http://www.w3schools.com/cssref/css_colornames.asp

Answer 2

对于这个HTML（我已复制每个导航项以表示添加的“活动”类）

<nav>
  <ul>
    <li class="blue"><a href="#">Normal</a></li>
    <li class="green"><a href="#">Normal</a></li>
    <li class="red"><a href="#">Normal</a></li>
    <li class="blue active"><a href="#">Active</a></li>
    <li class="green active"><a href="#">Active</a></li>
    <li class="red active"><a href="#">Active</a></li>
  </ul>
</nav>

我会使用这个CSS（注意链接在一起的CSS类，例如：.blue.active）

Answer 3

这是一种改变颜色的方法。您也可以使用图像或CSS来使用渐变。

#nav {
    position: relative;
    left: -90px;
background-color: #336699; // change #000088 (blue) for the color your want
color: #FFFFFF; // change #FFFFFF (white) for the color you want.

}

您可以使用color picker来获得所需的颜色。

如何更改导航栏（CSS）上的颜色

3 个答案: