当从一个HTML转到另一个HTML时，导航栏大小会发生变化_Html_Css_Navigation_Size

当从一个HTML转到另一个HTML时，导航栏大小会发生变化

html css navigation

当从一个HTML转到另一个HTML时，导航栏大小会发生变化,html,css,navigation,size,Html,Css,Navigation,Size,我正在创建我的个人网站，但很难理解为什么当我从一个HTML文件更改为另一个HTML文件时导航栏大小会发生变化。例如，当我单击“彩色HTML”时，导航栏会比主HTML更大。所有的HTML文件都使用相同的CSS，所以我不确定问题出在哪里 HTML: 您需要将div与top类一起移动，从标记外移动到标记内元素是元数据（关于数据的数据）的容器，位于标记和标记之间标记定义文档的主体。它包含HTML文档的所有内容，如标题、段落、图像、超链接、表格、列表等 <!DOCTYPE html> &l

我正在创建我的个人网站，但很难理解为什么当我从一个HTML文件更改为另一个HTML文件时导航栏大小会发生变化。例如，当我单击“彩色HTML”时，导航栏会比主HTML更大。所有的HTML文件都使用相同的CSS，所以我不确定问题出在哪里

HTML:

您需要将div与top类一起移动，从标记外移动到标记内

元素是元数据（关于数据的数据）的容器，位于标记和标记之间

标记定义文档的主体。它包含HTML文档的所有内容，如标题、段落、图像、超链接、表格、列表等

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="top">
    <!-- Put the rest of whats inside the top div here -->
</div>

</body>
</html>


页面标题

可能在标记未关闭的地方，您在此处遇到了一些格式问题。导航abr不属于头部区域…为什么你的头部标签在里面

body {
    background-color: black; /*rgb(241, 233, 233);*/
}

html, body {
    height: 90%;
    margin: 0;
    padding: 0;
}

.top {
    margin: auto;
    padding: 1.0em;
    overflow: hidden;
    background-color: black;
    top: 0;
    display: block;
    position: sticky;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    z-index: 100;
    clear: both;
    overflow: hidden;
}

.top p {
    color: white;
    font-size: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.center {
    text-align: center;
}

.center a{
    color: rgb(224, 224, 228);
    font-size: 1.5em;
}

.center a:hover{
    text-decoration: none;
    color: rgb(224, 224, 228);
}

.nav {
    float: right;
    position: relative;
    list-style: none;
    display: block;
}

.nav li {
    display: inline;
    list-style: none;
    position: relative;
}

.photography_1 {
    display: none;
}

.photography_1 li a {
    /*display: block;*/
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    background: rgb(221, 215, 215);
    white-space: nowrap;
    top: 20px;
    left: 25px;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="top">
    <!-- Put the rest of whats inside the top div here -->
</div>

</body>
</html>