如何更改导航栏的颜色(CSS)

ffdz8vbo 于 2023-10-21 发布在其他

关注(0)|答案(5)|浏览(143)

我快疯了。我已经尝试了所有的建议，在其他问题有关这一点，它只是不工作。
我需要改变导航栏的背景颜色。我不想在编辑器部分（WordPress）更改CSS。我一直试图在编辑CSS部分完成它。

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

nav > ul {margin: 40}

这就是我到目前为止所做的（它一直在工作，它集中了我想要的导航栏，并在标题和导航栏之间放置了一个空白）。有没有什么我可以添加到这个改变背景的颜色（然后我需要改变字体的颜色，太.）

css

来源：https://stackoverflow.com/questions/18996122/how-do-i-change-the-color-on-my-navigation-bar-css

5条答案

按热度按时间

xlpyo6sf1#

你是说像这样吗
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*/
}

赞(0）回复(0）举报 2023-10-21

sczxawaw2#

对于这个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）

赞(0）回复(0）举报 2023-10-21

ttygqcqt3#

这里有一个改变颜色的方法。你也可以使用图像或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来获得您想要的颜色。

赞(0）回复(0）举报 2023-10-21

new9mtju4#

也许你在HTML中使用了“class”选择器而不是“id”。
如果它是类选择器，它应该是：

.nav{
    background-color: #2d59a6  /*sample color*/
}

如果是id选择器，则应该是：

#nav{
    background-color: #2d59a6 /*sample color*/
}

赞(0）回复(0）举报 2023-10-21

pdkcd3nj5#

here's a example what I would do.

html:
<body>
<nav>
    <ul>
        <li>home</li>
        <li>about</li>
        <li>contact</li>
    </ul>
</nav>
</body>`enter code here`

CSS：

nav{
/* this is without id else with # */
   
    background-color: black;
 /* you can choose any coler you want */

    color: #FFFFFF;
/*is to change yor font color*/

    text-align: center;
    /*    or you can use what you did  position: relative;left:-90px */
    font-family: fantasy;
/* with this you can choose any font that you want*/
}
body{
    background-color: #051D62;/* background color for the body   */

}
nav > ul{
    margin: 40px;

}

赞(0）回复(0）举报 2023-10-21

我来回答

如何更改导航栏的颜色(CSS)

5条答案

相关问题

热门标签

最新问答