如何更改HTML列表项的颜色（颜色：firebrick不起作用

Question

我已经尝试了尝试颜色的明显方法：在我能想到的所有内容中使用耐火砖，正如您将在css链接中看到的那样。这是谷歌唯一要做的事情。在让我的列表内联之前，我已经对它进行了大量的编辑工作，但我认为这将是一个简单的修复，因为它首先很容易做到。

我希望问“我的代码有什么不对”并不是针对指南的具体情况，但我很难过。

我知道标题似乎是一个容易谷歌，重复的问题。但我所研究的一切都没有解决它。

我需要它看起来像这样：

这是我到目前为止：

#headings {
  background-color: firebrick;
  font-family: Arial, Helvetica, sans-serif;
  padding-left: 3em;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

#headings h1 {
  color: white;
  padding-top: 0px;
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

h2 {
  color: thistle;
  font-family: Arial, Helvetica, sans-serif;
  padding-left: 3em;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

#nav {
  background-color: lightgrey;
  color: firebrick;
  padding: 0px;
  margin: 0px;
}

#nav ul {
  color: firebrick;
  padding: 0px;
  margin: 0px;
}

#nav li {
  color: firebrick;
  text-decoration: none;
  display: inline;
  padding-right: 10%;
  padding-left: 4%;
}

#content {
  padding: 2em;
}

.figure {
  float: right;
  width: 30%;
  margin-right: 40px;
  clear: both;
  padding: 1em;
}

.equation {
  text-align: center;
}

#footnotes {
  text-align: center;
  clear: both;
  padding: 3em;
}

#footer {
  text-align: center;
  clear: both;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="HW2.css" />
  <title>Math 300 Assignment 2</title>
</head>

<body>
  <div id="headings">
    <h1>A Mathematical Web</h1>
    <h2>Roots of Polynomials</h2>
  </div>
  <div id="nav">
    <ul>
      <li><a href="http://math.wsu.edu/kcooper/M300/HWpoly_home.html">Home</a></li>
      <li><a href="http://math.wsu.edu/kcooper/M300/HWpoly_quadratic.html">The Quadratic</a></li>
      <li><a href="http://math.wsu.edu/kcooper/M300/HWpoly_cubic.html">The Cubic</a></li>
      <li><a href="http://math.wsu.edu/kcooper/M300/HWpoly_quartic.html">The Quartic</a></li>
      <li><a href="http://math.wsu.edu/kcooper/M300/HWpoly_galois.html">Galois Theory</a></li>
    </ul>
  </div>
  <div id="content">
    <h1>The Quadratic</h1>
    <p>
      A polynomial of degree two is called a quadratic, and an equation involving a quadratic polynomial whose value is zero is called a quadratic equation. The solutions of a quadratic equation are called the <i>roots</i> of the polynomial. Figure 1
      shows the graph of a quadratic polynomial. The roots of the polynomial are the points where the graph crosses the <i>x</i>-axis.
    </p>
    <div class="figure">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Polynomialdeg2.svg"> Figure 1. A quadratic polynomial<sup>*</sup>
    </div>
    <p></p>
    <p>
      The means of finding the roots of quadratic polynomials were known to the Babylonians and others thousands of years ago. Today, we can write our solutions more elegantly using modern mathematical notation. A general quadratic polynomial can be written
      in the form
    </p>
    <p class="equation">
      p(x) = ax<sup>2</sup> + bx + c.
    </p>
    <p>
      Using this notation, we can write the roots of <i>p</i> as
    </p>
    <p class="equation">
      ( 1/(2a) ) ( -b ± [ b<sup>2</sup> - 4ac ]<sup>1/2</sup> ).
    </p>
    <p>
      We can see that whenever <span class="equation">b<sup>2</sup> - 4ac &lt; 0</span> then there are two complex roots with non-zero imaginary parts. If
      <span class="equation">b<sup>2</sup> - 4ac = 0</span> then there is exactly one root, which is real. Otherwise, there are two real roots.
    </p>
  </div>
  <div id="footnotes">
    * By Original hand-drawn version: N.Mori Updated hand-drawn version: Rubber Duck (☮ • ✍) [Public domain], via Wikimedia Commons
  </div>
  <div id="footer">
    Copyright © 2018 Kevin Cooper
  </div>


</body>

</html>

Answer 1

添加颜色到#nav li a而不是#nav li

  #nav li a{
    color: firebrick;
    text-decoration: none;

  }
  #nav li
  {
    display: inline;
    padding-right: 10%;
    padding-left: 4%;
  }

Answer 2

你想改变a颜色所以使用：

li a{
    color: firebrick;
}

要删除文本使用下的行到li a css：

text-decoration: none;

如何更改HTML列表项的颜色（颜色：firebrick不起作用

问题描述投票：1回答：2

2个回答

最新问题

如何更改HTML列表项的颜色（颜色：firebrick不起作用

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2