html - 你如何改变导航栏的颜色

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-color:#002d60;

你可以使用类似 colorpicker.com 的东西查找颜色十六进制代码。如果您想更改导航栏中文本的颜色，请添加一个 color 属性，如下所示:

color:#003d60;

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