html - 即使在打字时如何显示我的标题背景颜色
问题描述
我希望你们都感觉良好。
所以我写了我的 HTML 代码,但我忘了<!DOCTYPE html>
在文档的开头添加,我的代码工作得很好,但是当我回去添加它时(<!DOCTYPE html>
),标题背景颜色消失了,我不知道为什么和我想找回来,但它仍然消失了,请问有谁知道是什么问题?
.HeaderContainer {
background-position: center;
position: fixed;
text-align: right;
width: 100%;
height: 150px;
padding: 20px;
}
.background {
background: url(annie-spratt-qyAka7W5uMY-unsplash.jpg);
height: 100vh;
background-size: cover;
bacground-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
filter: brightness(70%);
min-width: 100%;
max-width: 100%;
/* background-size: 1920px 2400px;*/
}
.list {
list-style: none;
margin-top: 30px;
position: absolute;
color: white;
top: 0px;
left: 50%;
}
.list .link {
color: white;
text-decoration: none;
padding: 20px 20px;
font-size: 30px;
text-align: center;
}
.list .link:hover {
background-color: white;
border-radius: 7px;
color: black;
font-weight: bold;
}
.dropDownList {
float: right;
paddin: 20px;
margin: 0;
}
.dropDownListButton {
color: white;
text-decoration: none;
padding: 12px 12px;
font-size: 30px;
text-align: right;
display: inline;
}
.dropDownList:hover .dropDownListButton {
background-color: white;
border-radius: 7px;
color: black;
}
.dropDownListContent {
display: none;
position: relative;
background-color: #F8C471;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.dropDownListContent .links {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropDownList:hover .dropDownListContent {
display: block;
}
.links:hover {
text-decoration: underline;
font-weight: bold;
}
<header>
<div class = "headerContainer" id = "myHeader">
<div class ="list" id = "myList"> <!-- To list the top-bar links -->
<a class = "link" href = "#" id = "home">Home</a>
<div class = "dropDownList">
<div class = "dropDownListButton"> Menu1 <i class="fa fa-caret-down"></i> </div>
<div class = "dropDownListContent">
<a href = "#" class = "links"> item1</a>
<a href = "#" class = "links"> item2 </a>
<a href = "#" class = "links"> item3 </a>
</div>
</div>
<div class = "dropDownList">
<div class = "dropDownListButton"> Menu2 <i class="fa fa-caret-down"></i> </div>
<div class = "dropDownListContent">
<a href = "#" class = "links"> Item1 </a>
</div>
</div>
<div class = "dropDownList">
<div class = "dropDownListButton"> Menu3 <i class="fa fa-caret-down"></i> </div>
<div class = "dropDownListContent">
<a href = "#" class = "links"> item1 </a>
</div>
</div>
</div>
<a href =
</div>
解决方案
推荐阅读
- python - Python threading.current_thread() 和回调
- c - 如何正确回收结构?
- python - 如何在 Django 中等待芹菜任务的结果
- azure-digital-twins - Azure 数字孪生角色分配权限
- python - 用 Python/Sicpy 拟合任意函数(模型)
- javascript - php 不回显来自 ajax javascript 的任何内容?
- windows - 如何通过禁用兼容模式以编程方式启动 EXE?
- kubernetes - Kubernetes 等待 apiVersion 和 kind 存在,然后再尝试使用它们来应用资源
- javascript - 在 typescript/javascript 中将 ISO-8601 字符串转换为本地日期
- node.js - 在firebase Nodejs中获取未定义的值