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

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

转载作者：太空宇宙更新时间：2023-11-04 03:36:09

25

4

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

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

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

最佳答案

要将导航栏固定在顶部而不留空隙，请将以下代码添加到您的 css 文件中:

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

关于html - 试图在我的页面顶部创建一个固定的导航栏，但是当我向下滚动时，导航栏正上方有一个间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25541121/

25

4

0

文章推荐： python - 按数字组合 Pandas 数据帧

文章推荐： Python 3，远程登录自动化

jquery - 正/负最大值输入
我有一个加号/减号按钮，希望用户不能选择超过 20 个但不知道如何让它工作。我尝试使用 min="1"max="5 属性，但它们不起作用。这是我的代码和一个 fiddle 链接。https://jsf
r - ggplot2 正/负图无法清晰呈现
我正在尝试复制顶部底部图，如示例 here但它没有正确渲染(紫色系列有 +ve 和 -ve 值，绿色为负值)留下杂乱的人工制品。我也在努力创建一个玩具示例来复制这个问题，所以我希望尽管我缺乏数据，但有
google-maps - 正/负纬度和经度值与基本方向
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 6 年前。社区去年审查了是
c++在添加两个绝对(正)值时得到负值
这个问题在这里已经有了答案: Adding two positive integers gives negative answer.Why? (4 个答案) 关闭 5 年前。我遇到了一个奇怪的问题
Java将负/正字符串数字转换为负/正 double
有谁知道如何将字符串值类型 -4,5 或 5,4 转换为 double -4.5 或 5.4? 最佳答案只需使用 Double.parseDouble(Locale, String); 糟糕，我很困
python - 在数据框中的新列中返回 TextBlob 正、负或中性分类
我正在尝试根据 TextBlob 分类插入一个仅包含“正”或“负”字符串的新数据框列:对于我的 df 的第一行，结果是 ( pos , 0.75, 0.2499999999999997)我想要' 正
VBA 循环根据相邻单元格更改单元格值(正/负)和字体颜色
我对 VBA 非常陌生，无法理解如何在一个循环中完成 2 个任务。我非常感谢您的帮助。我已经能够根据第 3 列中的数据更改第 2 列中的数值，但我不明白如何将负值的字体更改为红色。表格的大小每月都
jquery - 如何发送 "+"符号(加，正)
欢迎，我正在使用 jquery 通过 POST 发送表单。这就是我获得值(value)的方式。 var mytext = $("#textareaid").val(); var dataStrin
c# - 正 System.Double 值的快速下限和上限替代方案
double d = 0; // random decimal value with it's integral part within the range of Int32 and always p
javascript - 使用 Regex 正/负前瞻替换字符？
我有这个字符串: var a='abc123#xyz123'; 我想构建 2 个正则表达式替换函数: 1) 用 '*' 替换所有确实有 future '#'的字符(不包括'#') 所以结果应该是这样的
android - 如何将 DialogFragment 正/负按钮保留在软键盘上方
我正在使用 DialogFragment。当用户从 Gmail 平板电脑应用程序的屏幕与下面示例图片中的编辑文本进行交互时，我希望正面和负面按钮保持在键盘上方。在我的尝试中不起作用，这是我的 Dia
binary - 二进制补码； 0FFFFh 正，0FFFFh 负？
从组装艺术一书中，我复制了这句话: In the two’s complement system, the H.O. bit of a number is a sign bit. If the H.O
c++ - 基于数值(正、负、零)实现条件表达式的最佳方式
是否有更好更优雅的方法来实现下面的简单代码(diffYear、A 和 B 是数字): diffYear = yearA - yearB; if (diffYear == 0) { A = B
boolean true - 正 1 还是负 1？
我正在设计一种语言，并尝试确定 true 应该是 0x01 还是 0xFF。显然，所有非零值都将转换为 true，但我正在尝试确定确切的内部表示。每种选择的优点和缺点是什么？最佳答案没关系，只要
android - alertdialog 正/负按钮与全屏对话框 fragment 中的父级不匹配
在我的 dialogfragment 类的 OnCreateDialog 中，我正在这样做: AlertDialog.Builder builder = new AlertDialog.Builder
c++ - 正 lambda : '+[]{}' - What sorcery is this?
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda usin
ios - 正 NSDecimalNumber 返回意外的 64 位整数值
我偶然发现了一个奇怪的 NSDecimalNumber 行为:对于某些值，调用 integerValue、longValue、longLongValue 等，返回意想不到的值(value)。示例: l
c++ - 正 lambda : '+[]{}' - What sorcery is this?
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda using
regex - 匹配负/正 float/int 正则表达式 - 这是邪恶的吗？
我有这个正则表达式来测试用户输入是否有效: value.length === 0 || value === '-' || (!isNaN(parseFloat(value)) && /^-?\d+\.
matlab - 来自 matlab "fitgmdist"函数的不合理 [正] 对数似然值
我想用高斯混合模型拟合数据集，数据集包含大约 120k 个样本，每个样本有大约 130 个维度。当我使用 matlab 执行此操作时，我运行脚本(簇号为 1000): gm = fitgmdist(d

首页

博学

6Ren·AI

商城

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