Question

我正在尝试制作网站模板，我刚开始使用标题和导航栏。我试图在#header div中放置带有一些文本的div。我将位置设置为相对，我使用了top属性，但它只是没有移动。有人可以向我解释原因吗？

Answer 1

您需要在CSS中的#header块之后删除分号，因为这会阻止浏览器读取文件中的下一条规则：

#header {
  width: 100%;
  height: 700px;
  background-image: url("poro.jpg");
  background-size: 100%;
  text-align: center;
};

最后一个分号不应该在那里。 #navbar li和#header-msg块后面的半精度也是如此。

#header {
	width: 100%;
	height: 700px;
	background-image: url("poro.jpg");
	background-size: 100%;
	text-align: center;
}
#navbar {
	position: relative;
	width: 75%;
	height: 100px;
	top: 100px;
}
#navbar li {
	display: inline;
	padding-right: 40px;
	color: blue;
	position: relative;
	left: 350px;
}
#header-msg {
	position: relative;
	top: 300px;
}

<!DOCTYPE html>
<html>
<head>
	<title>
		Experimenting
	</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
	
	<div id="header">

		<div id="navbar">
			<ul>
				<li class="button">Home</li>
				<li class="button">Shop</li>
				<li class="button">Offers</li>
				<li class="button">FAQ</li>
			</ul>
		</div>

		<div id="header-msg">
			<h1>We sell stuff.</h1>
			<h3>You buy stuff.</h3>
		</div>

	</div>

</body>

</html>

注意：我让#navbar li在代码段中有蓝色文字，因此它们从白色背景中脱颖而出。

Answer 2

首先删除所有{}之后的分号。接下来尝试设置

#header {
   width: 100%;
   height: 700px;
   background-image: url("poro.jpg");
   background-size: 100%;
   text-align: center;
   position: relative;
}

并将＃header-msg的位置更改为绝对值：

#header-msg {
   position: absolute;
   top: 300px;
}

Answer 3

我在分号后给了一个额外的空格。

＆＃13;

#header {
	width: 100%;
	height: 700px;
	background-image: url("poro.jpg");
	background-size: 100%;
	text-align: center;
};

#navbar {
	position: relative;
	width: 75%;
	height: 100px;
	top: 100px;
};

#navbar li {
	display: inline;
	padding-right: 40px;
	color: white;
	position: relative;
	left: 350px;
};

#header-msg {
	position: relative;
	top: 500px;
};

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>
		Experimenting
	</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
	
	<div id="header">

		<div id="navbar">
			<ul>
				<li class="button">Home</li>
				<li class="button">Shop</li>
				<li class="button">Offers</li>
				<li class="button">FAQ</li>
			</ul>
		</div>

		<div id="header-msg">
			<h1>We sell stuff.</h1>
			<h3>You buy stuff.</h3>
		</div>

	</div>

</body>

</html>

＆＃13;

在标题内定位水平菜单

3 个答案: