为什么不显示div的背景颜色

时间：2015-04-25 02:54:06

标签： html css background-color

我似乎无法弄清楚为什么没有显示类menuBar的背景颜色。所有的“Hello”都只是占位符，所以我可以看到每个东西的位置。我已经搜索了互联网并且尚未占上风。正如你所看到的，我在编程方面有点初学者，但这就是我来到这里的原因，所以我可以从最好的方面学习。 ;）

这是CSS和html 

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-image: url(' 3D Mike.jpg ');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% auto;
}
.blended_grid {
  display: block;
  width: 1200px;
  overflow: auto;
  margin: 60px auto 0 auto;
}
.header {
  float: left;
  clear: none;
  min-width: 100px;
  min-height: 35px;
}
.topBanner {
  background-image: url(' topBanner.png ');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  clear: none;
  height: 200px;
  width: 1200px;
}
.menuBar {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 35px;
  width: 1200px;
}
.leftColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
.feedHost {
  float: left;
  clear: none;
  min-width: 80px;
  min-height: 80px;
}
.feed_00 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_01 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_02 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_03 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_04 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_05 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.rightColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
<html>

<head>
  <title>
    Welcome!
  </title>

  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="blended_grid">
    <div class="header">
      <div class="topBanner">

      </div>

      <div class "menuBar">
        <p>Hello</p>
      </div>
    </div>
    <div class="leftColumn">
      <p>Hello</p>
    </div>

    <div class="feedHost">
      <div class="feed_00">
        <p>Hello</p>
      </div>

      <div class="feed_01">
        <p>Hello</p>
      </div>

      <div class="feed_02">
        <p>Hello</p>
      </div>

      <div class="feed_03">
        <p>Hello</p>
      </div>

      <div class="feed_04">
        <p>Hello</p>
      </div>

      <div class="feed_05">
        <p>Hello</p>
      </div>
    </div>

    <div class="rightColumn">
      <p>Hello</p>
    </div>
  </div>
</body>

</html>

2 个答案:

答案 0 :(得分：2)

你错过了等号：

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-image: url(' 3D Mike.jpg ');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% auto;
}
.blended_grid {
  display: block;
  width: 1200px;
  overflow: auto;
  margin: 60px auto 0 auto;
}
.header {
  float: left;
  clear: none;
  min-width: 100px;
  min-height: 35px;
}
.topBanner {
  background-image: url(' topBanner.png ');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  clear: none;
  height: 200px;
  width: 1200px;
}
.menuBar {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 35px;
  width: 1200px;
}
.leftColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
.feedHost {
  float: left;
  clear: none;
  min-width: 80px;
  min-height: 80px;
}
.feed_00 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_01 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_02 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_03 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_04 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_05 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.rightColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}

<html>

<head>
  <title>
    Welcome!
  </title>

  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="blended_grid">
    <div class="header">
      <div class="topBanner">

      </div>

      <div class="menuBar">
        <p>mrnu bar</p>
      </div>
    </div>
    <div class="leftColumn">
      <p>Hello</p>
    </div>

    <div class="feedHost">
      <div class="feed_00">
        <p>Hello</p>
      </div>

      <div class="feed_01">
        <p>Hello</p>
      </div>

      <div class="feed_02">
        <p>Hello</p>
      </div>

      <div class="feed_03">
        <p>Hello</p>
      </div>

      <div class="feed_04">
        <p>Hello</p>
      </div>

      <div class="feed_05">
        <p>Hello</p>
      </div>
    </div>

    <div class="rightColumn">
      <p>Hello</p>
    </div>
  </div>
</body>

</html>
www\item(directory)
1.gif

答案 1 :(得分：1)

您只是错过了属性上的=符号

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-image: url(' 3D Mike.jpg ');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% auto;
}
.blended_grid {
  display: block;
  width: 1200px;
  overflow: auto;
  margin: 60px auto 0 auto;
}
.header {
  float: left;
  clear: none;
  min-width: 100px;
  min-height: 35px;
}
.topBanner {
  background-image: url(' topBanner.png ');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  clear: none;
  height: 200px;
  width: 1200px;
}
.menuBar {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 35px;
  width: 1200px;
}
.leftColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
.feedHost {
  float: left;
  clear: none;
  min-width: 80px;
  min-height: 80px;
}
.feed_00 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_01 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_02 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_03 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_04 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_05 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.rightColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
<html>

<head>
  <title>
    Welcome!
  </title>

  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="blended_grid">
    <div class="header">
      <div class="topBanner">

      </div>

      <div class="menuBar">
        <p>Hello</p>
      </div>
    </div>
    <div class="leftColumn">
      <p>Hello</p>
    </div>

    <div class="feedHost">
      <div class="feed_00">
        <p>Hello</p>
      </div>

      <div class="feed_01">
        <p>Hello</p>
      </div>

      <div class="feed_02">
        <p>Hello</p>
      </div>

      <div class="feed_03">
        <p>Hello</p>
      </div>

      <div class="feed_04">
        <p>Hello</p>
      </div>

      <div class="feed_05">
        <p>Hello</p>
      </div>
    </div>

    <div class="rightColumn">
      <p>Hello</p>
    </div>
  </div>
</body>

</html>

相关问题
最新问题