我想在我的网页上更多的yt视频，这样它就不会与我的导航栏冲突，我想向右移动大约10厘米，向下移动10厘米。
我还想在左上角的导航栏中添加一个标题或徽标，但我也不知道如何做到这一点。下面我已经为我的代码包含了html和css，谢谢。
<!DOCTYPE html>
<html>
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="Homepage.css">
<script type="text/javascript" href="Homepage.js"> </script>
<link href='https://fonts.googleapis.com/css?family=Raleway:700|Arya:400,700|Nunito:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="page">
<div id="navbar">
<ul>
<li><a href="#BasicInfo"> BASIC INFORMATION </a></li>
<li><a href="#Curriculum Vitae"> CURRICULUM VITAE </a></li>
<li><a href="#Portfolio"> PORTFOLIO </a></li>
<li><a href="#Report"> REPORT </a></li>
</ul>
</div>
<iframe width="800" height="400"
src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>In this section i will have some information about myself. <br>
For my finished website i'd like to make it responsive, so that it alters and readjusts
well to different screen sizes. I'd also like to include a gallery that uses javascript as
i haven't used any javascript on this site yet. <br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
Here i will have my twitter, instagram and facebook feed <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
massa quis enim.
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
</div>
<br>
<br>
</body>
</html>
#page {
margin: auto;
max-width: 85%;
font-family: 'Arya', sans-serif;
color: white;
padding-top: 50px;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
margin-left: 11%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Raleway', sans-serif;
}
li a:hover {
background-color: #5c5c5c;
color: white;
}
.contentbox {
font-family: 'Arya', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: grey;
}
.content {
background-color: grey;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
h3 {
margin-left: 5px;
max-width: 95%;
}
移动iframe的最快方法是将其放入<div>中，并为其提供所需的余量。要在导航栏中添加徽标，只需在div"导航栏"中放入<img>即可
<div id="youtube-vid">
<iframe width="800" height="400"
src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="navbar">
<img src="path/to/img">
<ul>
<li><a href="#BasicInfo"> BASIC INFORMATION </a></li>
<li><a href="#Curriculum Vitae"> CURRICULUM VITAE </a></li>
<li><a href="#Portfolio"> PORTFOLIO </a></li>
<li><a href="#Report"> REPORT </a></li>
</ul>
</div>