时间戳

首页 > 解决方案 > 未应用背景颜色

html - 未应用背景颜色

问题描述

我在编码时遇到问题，因为我真的找不到问题所在，背景颜色不会出现。
我使用了一个外部css文件。
我希望有人回答这个问题，代码如下：

这是html：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    </div>
  </body>

</html>

这是CSS：

.header {
  background-color: #111111;
}

标签： htmlcssbackground-color

解决方案

我实际上遇到了这个问题（在我知道 StackOverflow 之前）。您的代码（大部分）很好。
问题是计算机不知道该做什么。
div 只是一个分隔符。（很确定 div 是分隔符的缩写版本）。
里面没有任何东西的分隔线是空的。无用。
你需要在里面放一些东西来应用颜色、大小等。
请参阅以下 Stack Snippets®。

如您所见，添加文本是解决问题的简单方法。 

.header {
  background-color: #111111;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    And look at that. Problem solved.
    </div>
  </body>

</html>

如果您不想要文本，请添加<br>. 

.header {
  background-color: #111111;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    <br>
    </div>
  </body>

</html>

您甚至可以设置 div 的大小！

.header {
  height: 200px;
  width: 50 px;
  background-color: #111111;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    Some text here whose div has been set to 200 by 50 px
    </div>
  </body>

</html>


推荐阅读