Question

我对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?

Answer 1

对于您的菜单问题，只需将display:none;设置为.nav即可开始显示。对于您的其他问题，我认为将您的职位设置为绝对是造成问题的原因。通过将其更改为position:relative（并使背景变为绿色以便您可以看到它），div显示并且不会阻止简报文本。绝对不会关心它周围的其他东西。如果设置为绝对，它将相对于其最近的祖先的位置，在HTML的情况下，它是<body>

此外，您标记为id="submitbox"，但使用.submitbox代替#submitbox

在css中引用它

＆＃13;

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

＆＃13;

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

＆＃13;

隐藏在div之上的内容

1 个答案: