设置页眉颜色

Question

*
{
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin: 0;
  padding: 0;
  background-color: #23272A;
}

.header
{
  width: 100%;
  background-color: #2C2F33;
  border-bottom: 5px #FF9F00 solid;
  font-size: 15px;
  display: flex;
  align-items: center
}

#logo img
{
  float: left;
  margin: 0;
  padding: 20px;
  width: 187.5px;
  height: 63.75px;
  background-color: #2C2F33;
}

.navbar
{
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

li
{
  display: inline;
  padding: 0 22.5px 0 22.5px;
}

.navbar,
li,
a
{
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
}

.navbar,
li,
a:hover
{
  color: #FF9F00;
  text-decoration: none;
  list-style-type: none;
}

#forumpoints,
#dsh
{
  color: #FF9F00;
}

#dosh
{
  color: #FFFFFF;
}

<html>

  <head>

    <meta charset="utf-8">
    <link href="./css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Arszilla">

    <title>Website</title>

  </head>

  <body>

    <div class="header">

      <div id="logo">

        <img src="./img/logo.png"></img>

      </div>

      <div class="navbar">

        <div id="leftnavbar">

          <ul>

            <li><span id="forumpoints">Forum Points:</span> <span id="dosh">1.00000000</span> <span id="dsh">Dosh</span></li>

          </ul>

        </div>

        <div id="rightnavbar">

          <ul>

            <li><a href="index.html">Button 1</a></li>

            <li><a href="index.html">Button 2</a></li>

            <li><a href="index.html">Button 3</a></li>

            <li><a href="index.html">Button 4</a></li>

          </ul>

        </div>

      </div>

    </div>

我想让页眉的颜色为#2C2F33，这将比所有正文颜色浅 (*) 但是我得到的结果如下图所示

我不知道该怎么做，就好像我将 background-color: #2C2F33; 插入到 .navbar, li, a 中，有一些像这样的空白

我如何解决这个问题，因为我在 HTML/CSS 方面经验不足，目前需要帮助。

Answer 1

你可以把 background-color: #2C2F33 给 header *，像这样：

*
{
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin: 0;
  padding: 0;
  background-color: #23272A;
}

.header
{
  width: 100%;
  background-color: #2C2F33;
  border-bottom: 5px #FF9F00 solid;
  font-size: 15px;
  display: flex;
  align-items: center
}

#logo img
{
  float: left;
  margin: 0;
  padding: 20px;
  width: 187.5px;
  height: 63.75px;
  background-color: #2C2F33;
}
.header *{
    background-color: #2C2F33;
 }
.navbar
{
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

li
{
  display: inline;
  padding: 0 22.5px 0 22.5px;
}

.navbar,
li,
a
{
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
}

.navbar,
li,
a:hover
{
  color: #FF9F00;
  text-decoration: none;
  list-style-type: none;
}

#forumpoints,
#dsh
{
  color: #FF9F00;
}

#dosh
{
  color: #FFFFFF;
}

<html>

  <head>

    <meta charset="utf-8">
    <link href="./css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Arszilla">

    <title>Website</title>

  </head>

  <body>

    <div class="header">

      <div id="logo">

        <img src="./img/logo.png"></img>

      </div>

      <div class="navbar">

        <div id="leftnavbar">

          <ul>

            <li><span id="forumpoints">Forum Points:</span> <span id="dosh">1.00000000</span> <span id="dsh">Dosh</span></li>

          </ul>

        </div>

        <div id="rightnavbar">

          <ul>

            <li><a href="index.html">Button 1</a></li>

            <li><a href="index.html">Button 2</a></li>

            <li><a href="index.html">Button 3</a></li>

            <li><a href="index.html">Button 4</a></li>

          </ul>

        </div>

      </div>

    </div>

Answer 2

你可以给

.header * {
  background: #2C2F33;
}

或者您可以将主要 body 颜色包裹在 header 之后的另一个 div 周围。

<div class="main">
   the rest of your stuff
</div>

然后

*
{
  font-family: 'Montserrat', sans-serif;
  color: white;
}

与

.main {
  background-color: #23272A;
}

那就是 "better" css。

Answer 3

为什么您的导航栏背景比 header 更暗，是因为您为每个元素赋予了这种深色背景（这就是 * 选择器所做的）。现在因为导航栏是 header 的 children，它们绘制在 header 之上并且已经设置了自己的背景颜色，我们看不到 header 的颜色。

尝试只为 body 设置较暗的背景：

* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}

body {
background-color: #23272A;
}

设置页眉颜色

Setting Colors on the Header

html

css

header

background-color