Question

我想要更多关于我在我的网页上的视频，以便它不会与我的导航栏发生冲突，我想向右移动约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%;
}

Answer 1

移动iframe的最快方法是将其放入<div>并为其提供所需的边距。要在导航栏中添加徽标，只需将<img>放入div＆＃39; navbar＆＃39;

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

如何更改我的视频的位置（我想将它向下移动大约10厘米，向右移动10厘米以便它不会发生冲突）

1 个答案: