Question

我正在创建一个有趣的网站，而在创建粘性导航栏后我现在陷入困境。制作导航栏后，我键入的内容都没有显示，只是显示黑屏。我的代码如下：

    <!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;
 }

我正在运行节点server.js，并试图将其托管在我的PC上。运行它之后，我意识到标题没有出现，也没有任何出现。我似乎无法理解问题所在。感谢您提供的任何见解。

Answer 1

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

如果将.container div上的类名固定为main-section以匹配CSS并为其提供较大的顶部空白，则标题将被推到导航栏下方并变为可见：https://codepen.io/kenbellows/pen/gZwQdq

有点不重要了，但我建议您不要研究position: fixed;，而要position: sticky;。目前，它已经获得了非常扎实的支持，但是请记住您的浏览器要求，因为它仍然是一个新功能。

这是原始代码的另一个版本，仅将position: absolute交换为position: sticky，不在主要部分添加了上边距：https://codepen.io/kenbellows/pen/LMRXvm

Answer 2

<link rel="stylesheet" type="text/css"

您未打开链接标签

Answer 3

在链接标记中正确链接css文件
脚本应该在body标签的末尾，而不是在关闭body标签之后

/*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;
 }

<!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" href="" >

</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>
  
  <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>
  </body>

没有出现在HTML

3 个答案: