gpt4 book ai didi

html - 没有显示在 html 中

转载 作者:太空宇宙 更新时间:2023-11-03 22:20:51 24 4
gpt4 key购买 nike

我正在创建一个有趣的网站,但在创建粘性导航栏后,我现在陷入了困境。制作导航栏后我输入的任何内容都没有显示,只是显示黑屏。我的代码如下:

    <!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 上托管它。运行它之后,我意识到标题没有出现,也没有出现任何东西。我似乎无法理解问题出在哪里。感谢您提供任何可能有帮助的见解。

最佳答案

我将您的代码粘贴到 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

关于html - 没有显示在 html 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53834959/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com