Html 网页显示为空白_Html_Css

Html 网页显示为空白

html css

Html 网页显示为空白,html,css,Html,Css,作为一名新手，我正在youtube上学习制作一个简单网站的教程，但我在一些简单的html中遇到了麻烦。我使用Atom作为我的开发区域，但这不是问题所在，因为当我转到文件系统并运行index.html文件时，它只会给我一个白色屏幕。正如您在下面的代码中所看到的，我所做的只是添加一个蓝色背景。有人能指出我下面的代码有什么问题吗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

作为一名新手，我正在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>


文件
过程-街道
我们正在招聘

流体容器内部需要具有可见高度/宽度的东西。它可以只是一个简单的你好

尝试用以下内容替换代码：

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


你好，世界

现在蓝色背景将出现以下问题：

您已经创建了

，但里面没有内容，因此默认高度和宽度为0px

另外，类名“blue back”不在引导中，请确保您已在另一个css文件中创建了它

请检查以下由bootstrap提供的示例背景

类：


文件
背景在这里
请检查其他示例：
此文本非常重要
此文本表示成功
此文本表示一些信息
此文本表示警告
此文本表示危险
次要背景色
深灰色背景色
浅灰色背景色
你的流体容器
没有高度，因为它没有（可见的）内容。我们也可以看到你的css吗？@deceze，除非css中设置了关于宽度和高度的内容。为什么不添加一些文本并确保调用的页面正确。然后开始调试颜色问题在body、html、fluid container和blue Back上添加100%高度默认情况下，div
显示为block
，因此它具有全宽，但高度为零…仍然不显示，但写入does@squathub是的，因为除非您在css中提到，否则默认情况下p或div没有任何大小。写入会占用空间，因此样式显示为：@例如，只需给出类似div.blue-back{height:10px；width:10px；}