时间戳

首页 > 解决方案 > html中没有任何显示

html - html中没有任何显示

问题描述

我正在创建一个有趣的网站，在创建一个粘性导航栏后我现在被卡住了。制作导航栏后，我输入的任何内容都没有显示，只是显示黑屏。我的代码如下：

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" 

</head>


 <body>
  <div id="navbar">
      <img src="images/logo.png" href="#default" 
 id="logo"></img>
      <div id="navbar-right">
        <a class="active" href="#home">Home</a>
        <a href="#`enter code here`">Solutions</a>
        <a href="#">Promotions</a>
        <a href="#">Brochure</a>
        <a href="#">Contact Us</a>
      </div>
    </div>
    <div class="container">
      <h1> Promotions</h1>
    </div>
  </body>


  <script type="text/javascript" src="js/navbar.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

导航栏之后的任何内容，特别是 h1 促销都没有出现。下面是我的CSS代码

 /*This is for the home page*/
  * {box-sizing: border-box;}
  body { 
  margin: 0;
  font-family: Montserrat;
  background-color: #161616;
  }

#navbar {
overflow: hidden;
background-color: #161616;
padding: 30px 50px;
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}

#navbar a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
font-family: Montserrat;
line-height: 25px;
border-radius: 4px;
}

 #navbar #logo {
 /*font-size: 35px;
 font-weight: bold;*/
 width: 20%;
 height: auto;
 transition: 0.4s;
 }



#navbar a.active {
background-color: dodgerblue;
color: white;
}*/

#navbar-right {
float: right;
}

@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px !important;
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}

}

.main-section h1{
color: white;
font-weight: bold;
 }

我正在运行 node server.js 并尝试在我的 PC 上托管它。运行它后，我意识到标题没有出现，也没有任何东西出现。我似乎无法理解有什么问题。感谢您提供任何可能有用的见解。

标签： htmlcss

解决方案

我将您的代码粘贴到 CodePen （https://codepen.io/kenbellows/pen/dwpQmm）中，仅基于此，您的问题是<h1>隐藏在固定<nav>元素后面。由于导航栏有背景色，并且由于<h1>不是固定的，因此位于顶部，导航栏覆盖了<h1>的内容。

如果您修复.containerdiv上的类main-section名以匹配 CSS 并为其提供较大的上边距，则标题将被推到导航栏下方并变得可见：https ://codepen.io/kenbellows/pen/gZwQdq

有点跑题了，但position: fixed;我建议不要研究position: sticky;. 在这一点上它有相当可靠的支持，但请注意您的浏览器要求，因为它仍然是一个新功能。

这是原始代码的另一个版本，它只是交换position: absolute，position: sticky而没有在主要部分添加上边距：https ://codepen.io/kenbellows/pen/LMRXvm

推荐阅读