Question

我的在线投资组合遇到了一些问题。我将页面设置为页面右侧导航栏的位置以及我在同一div中用作背景的图像。我试图给我的投资组合一个介绍文本，但当我把它放在导航栏中向下移动。有办法解决这个问题吗？

这是我的代码：

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
*{
    margin: 0 auto;
    padding: 0;
}
#wrapper {
    margin: 0 auto; 
}

#background {
    display: block;
    background-image: url(images/profile/Untitled-1.jpg);
    background-repeat:no-repeat;
    background-size:contain;
    -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    filter: grayscale(80%);
    margin: 0 auto;
    border: 1px solid black;
}

header {
    margin-left: 10px;
    
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
p {
    display: block;
    width: 20%;
    font-size: 40px;
    color: antiquewhite;
    padding: 0;
    margin: 0 auto;
}

body {
    background-color: black;
}

footer{
    color: antiquewhite;
}

h1 {
    font-family:'Fjalla One', sans-serif;
    color: floralwhite;
    font-size: 300%;  
}
ha {
    display: block;
    width: 50%;
    font-family:'Titillium Web', sans-serif;
    color: floralwhite;
    font-size: 100%;
}

nav {
    display: block;
    margin-left: 80%;
    border: 2px solid orange;
    margin-bottom: 40%;
}
li{
    display: inline-block;
    padding: 20px;
    margin: 9px 0px;
    border-radius: 50px 0px 0px 50px;
    border: 2px solid white;
    width: 250px;
    height: 50px;
    text-align: center;
    text-shadow: 2px 2px black;
    font-size: 150%;
    font-family: 'Fjalla One', sans-serif;
    background-color: dimgray;
    position: relative;
    -webkit-transition-duration: 0.5s;
    /*    standard syntax*/
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    /*    standard syntax*/
    transition-property: transform;
}
/* tabs will extend to left slightly*/
.stretch:hover {
    -webkit-transform: translateX(-25px);
}

/*    standard syntax*/
    transform: translateX(-8px);
}

@keyframes extend{
    from {width: 200px; left:0px;}
    to   {width: 600px; left: 200px;}
}

li:hover{
    /* tabs will extend to left slightly*/
    -webkit-animation-name: "extend"; 
    -webkit-animation-duration: 2s;
     animation-direction: reverse;
}
    
a:link {
    text-decoration: none;
    color: antiquewhite;
}

a:visited {
    text-decoration: none;
    color: antiquewhite;
}

a:hover {
    text-decoration: none;
    color: antiquewhite;
}

a:active {
    text-decoration: none;
    color: antiquewhite;
}

＆＃13;

 <!DOCTYPE html>
 <html lang="en">
    <head>
       <link rel="stylesheet" media="screen" href="home.css">
       <title>Tavyon Richardson</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0" >
       <script src="jquery-3.1.1.min.js">
       </script>
    </head>
    <body>
       <div id="wrapper">
          <header>
             <h1>Tavyon Richardson</h1>
          </header>
          <p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
          <div id="background">
             <nav id="navbar">
                <ul>
                   <li class="stretch"><a href="">About me</a></li>
                   <li class="stretch"><a href="">Courses</a></li>
                   <li class="stretch"><a href="http://tavyonrichardson.com/projects.html">Projects</a></li>
                   <li class="stretch"><a href="http://tavyonrichardson.com/nms_114/blog">Blog</a></li>
                   <li class="stretch"><a href="">Resume</a></li>
                </ul>
             </nav>
             <footer>last updated November 2016</footer>
          </div>
        
       </div>
    </body>
</html>

＆＃13;

Answer 1

您需要将文本放在实际html 中的导航栏下，或者在css中使用position: fixed;。您还可以使用top:;和left:;。

在输入HTML代码时，Navbar会移动

1 个答案: