Question

曾经为一个问题苦苦挣扎了两天，但似乎看不出问题出在哪里。

我正在尝试学习HTML并在自己的网站上工作。但是，我无法继续前进，因为我没有从HTML代码中获得任何输出。我已经将代码插入到包括CSS在内的HTML验证器中，但是没有返回任何错误。我在做什么错了？

   <!DOCTYPE html>
   <html lang= "no">
   <head>
        <title>Rick Mason</title>
        <meta charset="utf-8" />
         <link rel="stylesheet" href="main.css"/>
   </head>

     <header>
     <nav>
     <ul>
              <li><a href="#">Om meg</a></li>
              <li><a href="#">Arbeidserfaring</a></li>
              <li><a href="#">Prosjektliste</a></li>
              <li><a href="#">Sertifikater</a></li>
      </ul>
      </nav>
      </header>

    <main>
        <p>This is just a test of some text </p>
     </main>

   </body>


   </html>


       body {
          height: 125vh;
          background-color: #EEE8AA;
          background-size: cover;
          font-family: sans-serif;
             }


       header{
          background-color: white;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 100px;
          display: flex;
          align-items: center;
          box-shadow: 0 0 25px 0 black;
          border-radius: 0 0 50px 50px;
                }

       header *{
            display: inline;
                 }

        header li{
            margin: 10px;

                }

       header li a {
          color: black;
          text-decoration: none;
              }

   li a:hover {
         background:#4cb15e;
         border-radius: 25px;
         padding: 8px;
               }

Answer 1

您应该获得一些输出-我尝试将您的代码粘贴到JSFiddle中：https://jsfiddle.net/e247ghn9/1/

不过，您似乎似乎缺少<body>开头的标记。那可能就是原因。

更新：

这是因为您在导航栏上使用position: fixed，所以您的内容被隐藏了。您可能应该在其余内容上使用上边距，如下所示：

main {
  margin-top: 100px;
}

Answer 2

似乎工作正常。您只需要将html和CSS代码分成单独的文件即可。以下是工作示例。

body {
  height: 125vh;
  background-color: #EEE8AA;
  background-size: cover;
  font-family: sans-serif;
}


header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 25px 0 black;
  border-radius: 0 0 50px 50px;
}

header * {
  display: inline;
}

header li {
  margin: 10px;

}

header li a {
  color: black;
  text-decoration: none;
}

li a:hover {
  background: #4cb15e;
  border-radius: 25px;
  padding: 8px;
}

<!DOCTYPE html>
<html lang="no">

<head>
  <title>Rick Mason</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="main.css" />
</head>

<body>


  <header>
    <nav>
      <ul>
        <li><a href="#">Om meg</a></li>
        <li><a href="#">Arbeidserfaring</a></li>
        <li><a href="#">Prosjektliste</a></li>
        <li><a href="#">Sertifikater</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <p>This is just a test of some text </p>
  </main>

</body>


</html>

Answer 3

我已经编辑了脚本，如果现在不起作用，我不知道会怎样。

HTML：

<!DOCTYPE html>
<html lang="no">

<head>
  <title>Rick Mason</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Om meg</a></li>
        <li><a href="#">Arbeidserfaring</a></li>
        <li><a href="#">Prosjektliste</a></li>
        <li><a href="#">Sertifikater</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <p>This is just a test of some text </p>
  </main>

</body>


</html>

CSS：

body {
  height: 125vh;
  background-color: #EEE8AA;
  background-size: cover;
  font-family: sans-serif;
}


header {
  background-color: #ffffff;
  position: 100px;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 25px 0 black;
  border-radius: 0 0 50px 50px;
}

header {
  display: inline;
}

header li {
  margin: 10px;

}

a {
  color: black;
  text-decoration: none;
}

li a:hover {
  background: #4cb15e;
  border-radius: 25px;
  padding: 8px;
}

Answer 4

使用页面包装器使页面的最小高度为100％，然后它将在所有设备上正确显示内容。

<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="utf-8">
<title>Rick Mason</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="page">
  <header>
    <nav>
      <ul>
        <li><a href="#">Om meg</a></li>
        <li><a href="#">Arbeidserfaring</a></li>
        <li><a href="#">Prosjektliste</a></li>
        <li><a href="#">Sertifikater</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p>This is just a test of some text </p>
  </main>
</div>
</body>
</html>

因为标题菜单是固定的，所以必须给主菜单顶部最小的菜单高度，例如120px。我添加了一些最小的CSS来给您一个起点。

html, body {
  height: 100%;
  margin: 0;
}
body, body * {
  box-sizing: border-box;
}
body {
  background-color: #eee8aa;
  background-size: cover;
  font-family: 'sans-serif';
  font-size: 16px;
  line-height: 1.5;
}
#page {
  min-height: 100%;
}
header {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: 100px;
  background-color: #ffffff;
  box-shadow: 0 0 25px 0 black;
  border-radius: 0 0 50px 50px;
}
header ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
header li {
  margin: 10px;
  padding: 0;
}
a {
  display: block;
  padding: 8px;
  color: black;
  text-decoration: none;
  border-radius: 25px;
  cursor: pointer;
}
li a:hover, li a:active {
  background: #4cb15e;
  text-decoration: none;
}
main {
  /* header height + some extra whitespace */
  padding-top: 120px; 
}

HTML没有提供所需的输出

4 个答案: