Question

我对网页设计很陌生，需要很多帮助。我正在尝试创建自己的网站。背景将是标题。在背景上，徽标位于左侧，导航栏位于右侧。文本也将以背景为中心。这是一个例子。此外，绝对位置意味着什么？有谁可以向我解释一下？任何帮助是极大的赞赏！谢谢这是一个例子：

这是我的代码......

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%:
	height: 100%;
	
}

.hero {
	height: 100%:
	width: 100%;
	background-image:url(../images/Background.png);
	background-size: cover;
	background-repeat: no repeat;
	background-position: center center;
	
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;   /* remove bullet point */
	float: right;
}

nav li {
	display: inline-block;
	margin: 1em;
	padding: 0.5em;	
}

nav a {
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
}

nav ul a:hover {
	color: #f13647;
	transition: all 0.5s ease-in;        
	padding: 15px 0;					
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Josh</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/modernizr.custom.40753.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/Test.css">
</head>
<body>
	<header>
		<div class="container">
			<div class="hero">
				<img src="images/logoo.png" alt="Logo FitnessX " class="logo">
				<nav class="sitenavigation">
					<ul>
						<li><a href="index.html">Home</a></li>
						<li><a href="aboutus.html">About Me</a></li>
						<li><a href="Work.html"></a>Work</li>
						<li><a href=""></a>Blog</li>
					</ul>
				</nav>
				<div class="home-hero">
					<h2>Hello my name is josh</h2>
					<p>I am 18 years old</p>
				</div>
			</div>
		</div>
	</header>
</body>
</html>

Answer 1

具有position: absolute;的元素相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

注意：“定位”元素的位置是除静态之外的任何元素。

这是一个简单的例子：

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="absolute">This div element has position: absolute; (ancestor is body) </div>
<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>
<div class="relative">This div also has positio: relative; which positions the div after the top div</div>

有关详细信息，请参阅this并尝试一些示例

Answer 2

英雄级别的

用像素改变你的身高：

.hero {
    height: 100%;
}

Answer 3

为您希望应用背景的容器提供一个通用的 div ：

<div class='bg-img'>
   <nav>Your navbar</nav>
   <header>Your header</header>
</div>

并在 CSS 中将 bg 应用到您的 .bg-img 容器：

.bg-img {
  background-img: url('someimg');
}

如何将背景图像设置为带徽标和导航栏的标题？

3 个答案: