我对HTML / CSS有娴熟的知识，但我遇到的问题不仅仅是让我弯腰。为了测试我的技能，我在电视节目等上建立网站，在设计网站时，我遇到了一个问题。如截图所示，虽然我已经宣布了上一个之后的div，但它似乎正在隐藏。
如你所见。我已经尝试了段落标记和div，似乎没有任何工作，我已经包含了HTML和CSS。
body {
padding:0;
margin: 0;
font-family: 'Raleway';
}
.nav {
background-color: black;
text-decoration: none;
color: silver;
margin: 0;
list-style: none;
text-align: center;
}
.nav > li {
display: block;
}
/* .nav > li:before {
content: "*";
} */
.nav > li > a {
text-decoration: none;
color: silver;
font-size:24px;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 4px;
}
.nav-btn {
display:block;
font-size: 30px;
background-color: black;
color: silver;
text-align: center;
cursor: pointer;
}
.image {
background-image:url('download1.jpg');
width:100%;
max-height:400px;
background-position: left center absolute;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
}
.title {
display: inline-block;
color: white;
position:relative;
margin: 15%;
text-transform: uppercase;
}
.image {
text-align: center;
position:absolute;
}
.image > h2 {
padding-top: 50%;
line-height: 50%;
}
@media screen and (max-width: 411px) {
.title > h2 {
font-size: 15px;
}
.image {
max-height:280px;
}
}
.submitbox {
color: yellow;
background-color: darkblue;
z-index: 1 !important;
}<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
<span class="nav-btn">Menu</span>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div id="submitbox"><h2>Sign up for our Newsletter!</h2></div>
<p>hello</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function () {
$('ul.nav').toggle();
});
</script>
</body>
有些代码与我的要求无关。此外，我有一个菜单，但它在页面加载时打开，并想知道如何在页面加载时关闭它？另外，运行代码片段并没有说明我所说的图像缺失。
编辑：重要用于尝试将H2置于图像的前端，这在运行代码段时无法看到。我使用了绝对的位置所以当调整任何东西时它不会影响所述样式，抱歉如果我做错了。还改变了图像。
EDIT2：我刚才意识到为什么我使用绝对位置，当窗口缩小时停止图像在图像上方和下方获得白条 White bars?
答案 0 :(得分：1)
对于您的菜单问题，只需将display:none;设置为.nav即可开始显示。对于您的其他问题，我认为将您的职位设置为绝对是造成问题的原因。通过将其更改为position:relative（并使背景变为绿色以便您可以看到它），div显示并且不会阻止简报文本。绝对不会关心它周围的其他东西。如果设置为绝对，它将相对于其最近的祖先的位置，在HTML的情况下，它是<body>
此外，您标记为id="submitbox"，但使用.submitbox代替#submitbox
body {
padding:0;
margin: 0;
font-family: 'Raleway';
}
.nav {
display:none;
background-color: black;
text-decoration: none;
color: silver;
margin: 0;
list-style: none;
text-align: center;
}
.nav > li {
display: block;
}
/* .nav > li:before {
content: "*";
} */
.nav > li > a {
text-decoration: none;
color: silver;
font-size:24px;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 4px;
}
.nav-btn {
display:block;
font-size: 30px;
background-color: black;
color: silver;
text-align: center;
cursor: pointer;
}
.image {
background-image:url('download1.jpg');
width:100%;
max-height:400px;
background-position: left center absolute;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
}
.title {
display: inline-block;
color: white;
position:relative;
margin: 15%;
text-transform: uppercase;
}
.image {
text-align: center;
position:relative;
background-color:green;
}
.image > h2 {
padding-top: 50%;
line-height: 50%;
}
@media screen and (max-width: 411px) {
.title > h2 {
font-size: 15px;
}
.image {
max-height:280px;
}
}
.submitbox {
color: yellow;
background-color: darkblue;
z-index: 1 !important;
}<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
<span class="nav-btn">Menu</span>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div id="submitbox"><h2>Sign up for our Newsletter!</h2></div>
<p>hello</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function () {
$('ul.nav').toggle();
});
</script>
</body>