Question

我正在学习HTML，CSS和JAVAScript，最近我写了一个非常简单的代码。它显示了一切并且工作正常，直到我添加了div类＆＃34; mainLeft＆＃34;。之后，除了该类之前的代码之外，它不会显示任何内容。你能帮忙吗？下面是HTML和CSS代码;

CSS代码

＆＃13;

**CSS Code** 
    body {
      background-color: white;
    }
    .main h1 {
      font-family: Candara;
      text-align: center;
      color: white;
    }
    .main {
      display: table;
      height: 50px;
      width: 600px;
      margin-left: auto;
      margin-right: auto;
      background-color: #13b5ea;
    }
    .SME {
      display: table;
      position: absolute;
      width: 250px;
      height: 250px;
      left: 50%;
      top: 50%;
      margin-left: -125px;
      margin-top: -125px;
      color: #13b5ea;
    }
    .SME h4 {
      font-size: 30px;
      color: white;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      font-family: Candara;
    }
    .DataAnalysis {
      display: table;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 38.3%;
      top: 28%;
      margin-left: -100px;
      margin-top: -100px;
      color: #13b5ea;
    }
    .DataAnalysis h4 {
      font-size: 30px;
      color: white;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      font-family: Candara;
    }
    .ProdMonitor {
      display: table;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 38.3%;
      top: 72%;
      margin-left: -100px;
      margin-top: -100px;
      color: #13b5ea;
    }
    .ProdMonitor h4 {
      font-size: 30px;
      color: white;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      font-family: Candara;
    }
    .mainLeft h1 {
      font-family: Candara;
      text-align: center;
      color: white;
    }
    .mainLeft {
      display: table;
      height: 50px;
      width: 600px;
      margin-right: auto;
      background-color: #13b5ea;
    }

＆＃13;

<html>

<head>
  <link type="text/css" rel="stylesheet" href="satmap.css" />
  <title>My Home</title>
</head>

<body>
  <!--Go bananas!-->
  <div class="main">
    <h1> XYZ</h1>
  </div>

  <div class="mainLeft">
    <h1> Current Stats </h1>
  </div>

  <div class="SME">
    <h4> My Explorer </h4>
  </div>

  <div class="DataAnalysis">
    <h4> Data Analysis </h4>
  </div>

  <div class="ProdMonitor">
    <h4> Production Monitoring </h4>
  </div>

</body>

</html>

＆＃13;

Answer 1

首先，我没有看到类'mainLeft'的任何div。你只有那些div中的文本，所以你看不到任何东西的原因是因为你的h定义中有这个css。

color: white;

Answer 2

谢谢大家。我解决了我忘了在CSS中添加 background-color 属性。

网页未显示所有HTML元素

2 个答案: