Question

如何在此代码中更改导航栏的颜色？

CSS

<style type="text/css">
body 
    {
      background-color:#454545;
      color:white;
      font-family:"Courier New";
      text-align:center;
    }
      a:link
    {
      color:white;
    }
      a:visited
    {
      color:white;
    }
      a:hover
    {
      color:white;
    }
      a:active
    {
      color:white;
    }
.nav
    {
      border:1px solid #ccc;
      border-width:1px 0;
      list-style:none;
      margin:0;
      padding:0;
      text-align:center;
    }
    .nav li{
    display:inline;
    }
.nav a
    {
    display:inline-block;
    padding:10px;
    }
h1
    {
      font-size:40;
    }
h2
    {
      font-size:27.5;
      text-decoration:underline;
    }
h3
    {
      font-size:20;
    }
p
    {
      font-size:12;
    }
    </style>

HTML

<li><a href="http://">Home</a></li>
<li><a href="http://">Youtube</a></li>
<li><a href="https://">Twitter</a></li>

我已经查找了如何改变它，但它只给了我关于twitter的东西。我只是想知道如何更改导航栏颜色而不是整个页面颜色。

Answer 1

为.nav区块添加背景？

background: #FFDD00; //some color

Answer 2

添加这是css的正确部分，用于着色某些元素。

background-color:#000;

Answer 3

在没有看到所有代码或所需效果的情况下很难分辨，但背景颜色是您想要更改背景的CSS属性，或用于更改文本颜色的颜色。

Answer 4

要更改导航栏本身的背景颜色，请将其添加到.nav类：

background-color:#002d60;

您可以使用类似colorpicker.com的内容来查找颜色十六进制代码。如果您想要更改导航栏中文本的颜色，请添加color属性，如下所示：

color:#003d60;

对于这两种情况，您还可以使用rgba(n,n,n,n)，rgb(n,n,n)甚至hsl(n,n,n)来选择带有红绿蓝或色调饱和度 - 亮度值的颜色。

你如何改变导航栏的颜色

4 个答案: