Question

关闭 </body> 标签后的任何内容均不可见。

输出文本在浏览器中不可见。我尝试在它周围添加和删除 <div> 和 <body> 标签。我似乎无法解决我的错误。

h1{
    font-family: 'Inknut Antiqua', sans-serif;
    color: rgb(255, 118, 193);
    float: right;
    position: relative;
    right: 1020px;    
}
.logo{
    float: left;
    width: 5%;
    position: relative;
    top: 20px;
    left: 40px;
}
#bg{ 
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    justify-content: space-between;
    display: flex;
    background-color: rgb(222, 255, 102);
}
h4{
    color: black;
    font-size: x-large;
    text-align: center;
}

<!DOCTYPE html>
<html>

<head>
    <title>Giovanni's Guitars</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300&display=swap"
        type='text/css'>
</head>

<body>
    <header id="bg">
        <div>
            <h1>Giovanni's Guitars</h1>
            <img class="logo" src="logo1.svg" alt="a logo">

        </div>
    </header>

</body>

<div>
    <h4>Guitars and Bases</h4>
</div>

</html>

请帮帮我。

Answer 1

你的 div 标签应该在 body 标签内

<!DOCTYPE html>
<html>

<head>
    <title>Giovanni's Guitars</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300&display=swap"
        type='text/css'>
</head>

<body>
    <header id="bg">
        <div>
            <h1>Giovanni's Guitars</h1>
            <img class="logo" src="logo1.svg" alt="a logo">

        </div>
    </header>
<div>
    <h4>Guitars and Bases</h4>
</div>
</body>



</html>

Answer 2

你不能那样做。 HTML 的设计方式是将所有页面元素放置在 <body></body> 元素内。

如果您需要一个包装器，只需在您的 <div> 元素中添加一个 <body>。

Answer 3

你的所有内容都应该在你的 body 元素中。

此外，在您的 #bg 选择器中，您设置了 position="fixed"，这使得它之后的其他内容“消失了”。

这不是最佳做法，但您可以这样做：

<!DOCTYPE html>
<html>
  <head>
    <title>Giovanni's Guitars</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300&display=swap"
      type="text/css"
    />
  </head>

  <body>
    <header id="bg">
      <div>
        <img class="logo" src="logo1.svg" alt="a logo" />
        <h1>Giovanni's Guitars</h1>
      </div>
    </header>

    <div class="content">
      <h4>Guitars and Bases</h4>
    </div>

  </body>
</html>

h1 {
  font-family: "Inknut Antiqua", sans-serif;
  color: rgb(255, 118, 193);
  display: inline-block;
  vertical-align: middle;
}
.logo {
  width: 5%;
  margin: 50px;
  display: inline-block;
  vertical-align: middle;
}
#bg {
  top: 0px;
  right: 0px;
  left: 0px;
  width: 100%;
  height: 150px;
  position: fixed;
  justify-content: space-between;
  display: flex;
  background-color: rgb(222, 255, 102);
}
h4 {
  color: black;
  font-size: x-large;
  text-align: center;
}

.content {
    margin-top: 150px;
}

Answer 4

你的 body 标签应该在 html 标签之前关闭。

输出文本未显示在 html 中

4 个答案: