背景颜色没有出现

时间:2017-04-04 16:19:54

标签: html css

我无法将颜色显示在chrome中。我已经尝试在<link>中切换文件的顺序,以防万一出现问题。我没有看到为什么颜色会以铬色显示出来的原因。

&#13;
&#13;
.header {
  background-color: white;
}

.body {
  background-color: blue;
}
&#13;
<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="headertext">
          <h1> ROBIN HOBB </h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="facebookbuttons"></div>
        <div class="fantasy_text"></div>
      </div>
    </div>
  </div>
</div>
<div class="body">
  <div class="container"></div>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您的.body班级DIV没有任何内容。如果你在其中放入一些文字,你会看到蓝色背景:

(并且由于浏览器窗口背景默认为白色,因此您不会在.header DIV上看到白色背景...)

.header {
  background-color: white;
}

.body {
  background-color: blue;
}
<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="headertext">
          <h1> ROBIN HOBB </h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="facebookbuttons"></div>
        <div class="fantasy_text"></div>
      </div>
    </div>
  </div>
</div>
<div class="body">
  <div class="container">Here is some content</div>
</div>

答案 1 :(得分:0)

&#13;
&#13;
.header {
  background-color: white;
}

body {
  background-color: blue;
}
&#13;
<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="headertext">
          <h1> ROBIN HOBB </h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="facebookbuttons"></div>
        <div class="fantasy_text"></div>
      </div>
    </div>
  </div>
</div>
<div class="body">
  <div class="container"></div>
</div>
&#13;
&#13;
&#13;

我假设您正在尝试更改整个页面背景颜色,需要使用正文{...} 选择器而不是 .body {...} 如本样本。

但是,如果目标是使用一个正文类来定位你的CSS是正确的,但内容中没有内容,所以默认情况下它的高度为0。添加约翰内斯提到的内容,它应该适合你。