Question

导航栏不在浏览器窗口的顶部。我该如何解决这个问题？

我鼓励您输入我的代码并运行它以进行预览。

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
        <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
        <link rel="stylesheet" href="Website(CSS).css" type="text/css" media="screen" title="no title" charset="utf-8">
        <title>Hunter's Website</title>
    </head>
    <body>
        <div class="nav">
            <div class="container">
                <ul class="nav-left">
                    <li id="twitter">
                        <a href="http://twitter.com/#"><img src="Twitter.png" width="75" height="75" alt="Twitter" /></a>
                    </li>
                    <li id="instagram">
                        <a href="http://instagram.com/#"><img src="Instagram.png" width="75" height="75" alt="Instagram"/></a>
                    </li>
                    <li id="quora">
                        <a href="http://quora.com/#"><img src="Quora.jpg" width="125" height="54" alt="Quora" /></a>
                    </li>
                </ul>
                <ul class="nav-right">
                    <li id="future-plans">
                        <a href="insert link">Future Plans</a>
                    </li>
                    <li ="contact">
                        <a href="inset link">Contact</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="jumbotron">
            <div class="layer"></div>
            <div class="container">
                <h1>Learn more about me.</h1>
                <p>
                    Click <a href="insert link">here</a> to learn more about my future.
                </p>
            </div>
        </div>
        ...
    </body>
</html>

CSS代码： 你可以忽略这些笔记，它们只是提醒我需要做些什么。

/* Get the individual social media links to be pretty spaced out from each other, 
get the whole box of social image links to be closer to the left border. Get the nav header to be positioned as absolute. Get the -
.nav-right to have better font. To be bigger font, and to pushed a little more to the left of the nav box. */

body {
    border: 2px solid green;
}

.nav {
    /* Play around with height, try and get edges curved 
    Try making .jumbotron image to be full sized w/o cropping & 1110 width or whatever */
    background-color: red;
    height: 11%;
    width: 98%;
    position: fixed;
    z-index: 10;
    border: 2px solid black;
}

.nav ul {
    display: inline;
    border: 2px solid black;
}

.nav li  {
    display: inline;
    border: 2px solid black; 
}

.nav .nav-left {
    float: left;
    clear: both;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border: 2px solid black;
}

.nav .nav-right {
    float: right;
    margin-top: 15px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 20px;
    border: 2px solid black;
}

.jumbotron {
    height: 515px;
    width: 1110px;
    background-image: url('Website .jumbotron.jpeg'); 
    background-repeat: no-repeat;
    position: relative;
    margin-top: 120px;
    border: 2px solid black;
} 

.layer {
    background-color: rgba(76,76,76, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid black;
}

.jumbotron .container {
    position: relative;
    top: 240px;
    left: 26px;
}

.jumbotron h1 {
    color: white;
    font-family: 'Shift', serif;
    font-weight: bold;
    font-size: 36px;
}
.jumbotron p {
    color: white;
    font-family: 'Crimson Text';
    font-size: 20px;
}

Answer 1

要将导航栏固定在顶部而没有间隙，请将以下代码添加到您的css文件中：

.nav {
  position: absolute;
  top: 0px;
}

Answer 2

如果您希望将导航栏放在窗口的顶部，只需将此行添加到CSS中：

.nav {
  top: 0;
}

我建议像这样的gerenal布局（当然在<body>内部）：

<div id="wrap-out">
  <div id="wrap-in">
    <nav id="nav"><a href="#">link1</a> | <a href="#">link2</a></nav>
    <div id="content">
      <h1>some kind of standard layout...</h1>
      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.
    </div>
    <footer id="footer">(C) by Mr. Footer</footer>
  </div>
</div>

CSS：

#wrap-out {
  max-width: 1000px;
  min-width: 300px;
  width: 90%;
  margin: 0 auto;
}

#wrap-in {
  padding: 20px;
}

顺便说一句：下次如果你问一个问题会很聪明地给出一个CODEPEN或FIDDLE

请参阅此http://codepen.io/elstermann/pen/wBqhc?editors=110并参与其中

试图在我的页面顶部创建一个固定的导航栏，但是当我向下滚动时，导航栏正上方有一个间隙

2 个答案: