混乱的HTML元素

编程问答 2022-08-10

问题描述

我需要帮助来弄清这些要素。通常，当我编写代码时，我做到了，所以他们总是会落在正确的位置，但是我却忘记了在这种情况下不该做的事情（对我们来说是正确的吗？）。读取“您的全部需求”的部分被塞在页面的横幅中，我试图将其放置在横幅之后的位置。这是我使用的html代码

其中包含JS代码，但不适用于此代码，因为它仅影响在代码块中创建的菜单。字体的大小只是为了看清楚它的出现位置。

以下是查看该问题的图片：

enter image description here

* {
    padding: 0;
    margin: 0;
}



/* Nav */

.sidenav {
    z-index: 2;
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0;
    background-color: #245727; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s;
  }

  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: rgb(213,213,213);
    display: block;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #5DE366;
  }

  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

#navbtn {
    padding-left: 2%;
    padding-top: 0.5%;
    font-size: 2.5rem;
    position: fixed;
    top: 0;
    z-index: 1;
    color: rgb(255,255,255);
}



/* Banner */

header#banner {
    position: absolute;
    top: 0;
    font-family: "Sacramento",cursive;
    font-size: 3rem;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-image: url('https://images.pexels.com/photos/1382393/pexels-photo-1382393.jpeg?cs=srgb&dl=pexels-madison-inouye-1382393.jpg&fm=jpg');
    /* added background colour for missing image */
    background-size: 100%;
    background-repeat: no-repeat;
    border-bottom: dimgrey 2px solid;
    opacity: 0.8;
    text-align: center;
}

#banner h1 {
    padding: 5rem;
    margin: 3%;
    color: rgb(255,255);
    text-shadow: 4px 4px 5px black;
}

@media only screen and (min-width: 500px) and (max-width: 1200px) {
    header#banner {
        font-size: 2rem;
    }
}

@media only screen and (min-width: 200px) and (max-width: 700px) {
    header#banner {
        font-size: 1.5rem;
    }
}

/* Description */ 

#description {
    position: absolute;
    font-size: 30px;
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Isle De Fleur</title>
    <link rel="stylesheet" href="jquery.mmenu.css">
    <link rel="stylesheet" href="./resources/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@1,700&family=Lora:ital@1&family=Montserrat:wght@300&family=Sacramento&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/614822e778.js" crossorigin="anonymous"></script>
</head>

<nav>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">Home</a>
        <a href="#">Indoor Plants</a>
        <a href="#">Outdoor Plants</a>
        <a href="#">Info</a>
      </div>

      <span onclick="openNav()"><i class="fas fa-bars" id="navbtn"></i></span>
</nav>
<body>
    <header id="banner">
        <h1>Isle De Fleur</h1>
    </header>

    <section id="description">
        All your holistic needs 
    </section>

</body>
<script src="./index.js"></script>
  </html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

displayhtmlposition