Question

作为一个新手，我正在youtube上学习一个简单的网站教程，但是我从一些简单的html碰到了砖墙。我使用Atom作为开发区域，但这不是问题所在，因为当我进入文件系统并运行index.html文件时，它只会给我一个白屏。如您在我的代码下面看到的，我所要做的就是添加一个蓝色背景。有人可以在下面指出我的代码有任何问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <script src='./script.js'></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  <title>Document</title>
</head>
<body>
<div class="fluid-container">
  <div class="blue-back"></div>

  <div class="row"></div>
  <div class="col-md-8 offset-md-2"></div>
  <header>
  <span class="logo">PROCESS-STREET</span>
  <span class="hiring-text">We're hiring</span>
  </header>
</div>
</body>
</html>

Answer 1

fluid-container内部必须有可见的高度/宽度。它可能只是一个简单的<p>Hello</p>

尝试以此替换您的代码：

<div class="fluid-container">
     <div class="blue-back">
          <p>Hello world</p>
     </div>
</div>

现在蓝色背景就在那里

Answer 2

问题：

您已经创建了<div>，但其中没有内容，因此默认的高度和宽度为0px
而且类名“ blue-back”不在引导程序中，请确保已在另一个css文件中创建了它。

请在下面查看由引导程序给出的示例背景class：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <script src='./script.js'></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  <title>Document</title>
</head>

<body>
  <div class="fluid-container">
    <div class="bg-primary">background is here</div>
    
    <p>Please check other example : </p>
   <p class="bg-primary text-white">This text is important.</p>
  <p class="bg-success text-white">This text indicates success.</p>
  <p class="bg-info text-white">This text represents some information.</p>
  <p class="bg-warning text-white">This text represents a warning.</p>
  <p class="bg-danger text-white">This text represents danger.</p>
  <p class="bg-secondary text-white">Secondary background color.</p>
  <p class="bg-dark text-white">Dark grey background color.</p>
  <p class="bg-light text-dark">Light grey background color.</p>
  </div>
</body>

</html>

网页显示为空白

2 个答案: