javascript - div元素在CSS之后不显示
问题描述
Web 开发新手,我正在创建一个新网站,目前使用 html、js 和 css,但应用 css 后缺少一些元素?两个 div 元素 box1 和 box2 中的所有内容都丢失了。我在 chrome 中打开了检查选项,看到它们在代码中但没有加载?
<header>
<img src="SAGE LOGO.png">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</header>
<main>
<div class="box1">
<label class="ld-label">
Project Number:
</label>
<input class="ld-url-input" type="text" id="fetchURL" />
<button type="button" id="add" class="design_button add">Draw</button>
</div>
<div class="box2">
<form method="post" action="data.php">
<label class="ld-label">
Add Project:
</label>
<input class="ld-url-input" type="text" name="textdata">
<input type="submit" name="submit" value="Submit">
</form>
</div>
</main>
<div id="super">
<div id="container">
</div>
</div>
CSS:
header img {
height: 80px;
}
body {
height: 125vh;
background-color: #222641;
background-size: cover;
font-family: sans-serif;
}
main {
color: white;
}
header {
background-color: #A80B16;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
}
.ld-label {
width: 200px;
}
.ld-url-input {
display: inline-block;
}
解决方案
您header
与您的内容重叠。
删除或给予position: fixed;
你的header
padding-top: 80px;
main
header img {
height: 80px;
}
body {
background-color: #222641;
background-size: cover;
font-family: sans-serif;
}
main {
color: white;
padding-top: 80px;
}
header {
background-color: #A80B16;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
}
.ld-label {
width: 200px;
}
.ld-url-input {
display: inline-block;
}
<header>
<img src="SAGE LOGO.png">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</header>
<main>
<div class="box1">
<label class="ld-label">
Project Number:
</label>
<input class="ld-url-input" type="text" id="fetchURL" />
<button type="button" id="add" class="design_button add">Draw</button>
</div>
<div class="box2">
<form method="post" action="data.php">
<label class="ld-label">
Add Project:
</label>
<input class="ld-url-input" type="text" name="textdata">
<input type="submit" name="submit" value="Submit">
</form>
</div>
</main>
<div id="super">
<div id="container">
</div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="./script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
推荐阅读
- javascript - NodeJs:Express 为每个请求生成新会话
- java - eclipse没有启动,gtk警告
- javascript - 使用 onclick 事件中断并继续循环
- python - 尝试使用估算器进行分布式训练时如何设置 STANDALONE_CLIENT 模式?
- node.js - Node.js 服务器错误:socketOnEnd 解析错误 (_http_server.js:455:20)
- glusterfs - 从 XFS 砖读取,在卷上写入?
- assembly - Nasm 除法运算符`/`
- excel - Access 导出(Excel 或 .csv)限制为 1750 行
- python - 我正在尝试使用 Python 将数据从 excel 导入 MySQL
- python - 在 CentOS 8 上安装 Python 2.4 失败并出现分段错误