简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Ein Abschnitt kann in HTML oder CSS nicht richtig positioniert werden
P粉481035232
P粉481035232 2023-09-10 10:29:17
0
1
489

Ich erstelle eine Portfolio-Website und möchte unterhalb des Abschnitts „Über“ einen Abschnitt „Hobbys“ haben. Als ich den Abschnitt „Hobby“ zum ersten Mal erstellt habe, erschien er über dem Abschnitt „Info“, obwohl ich ihn im HTML unterhalb des Abschnitts „Info“ codiert hatte. Wenn ich nun versuche, es mit DevTools unterhalb des Abschnitts „Info“ zu platzieren, wird es unter dem Abschnitt „Info“ ausgeblendet. Wir würden uns sehr über Ihre Hilfe freuen. 

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry)
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove("show");
    }
  })
})

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el));
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(0, 118, 214);
}


* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

#hero {
  background-color: darkgray;
  height: 100vh;
}

#hey {
  position: absolute;
  top: 228px;
  left: 46vw;
}

#name {
  position: absolute;
  top: 39vh;
  left: 39vw;
}

#line_1 {
  position: absolute;
  top: 50vh;
  left: 23vw;
}

#line_2 {
  position: absolute;
  top: 50vh;
  right: 21vw;
}

nav {
  position: fixed;
  top: -50px;
  left: 20.7vw;
  width: 100%;
  background-image: url("navbar.png");
  background-repeat: no-repeat;
  transition: top 0.2s ease-in-out;
  font-family: 'Playfair Display', serif;
}

nav ul {
  margin: 0;
  padding: 0;
  position: relative;
  right: 313px;
  list-style: none;
  text-align: center;
  font-size: larger;
}

nav li {
  display: inline-block;
  margin: 10px;
  margin-right: 25px;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}


nav:hover {
  top: 0;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #ffffff;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#about {
  position: absolute;
  top: 111vh;
  left: 45vw;
  font-family: 'Playfair Display';
  width: 29vw;
}

#about h1 {
  font-size: xx-large;

}

#about h2 {
  font-size: large;
  position: relative;
  left: -13px;
  top: 48px;
}

#profile_pic {
  position: relative;
  bottom: 161px;
  right: 305px;
}

#india {
  position: relative;
  right: 276px;
  bottom: 163px;
  height: 56px;
}

.hidden {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

#blur_bg {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 76vh;
  left: 28vw;
}

#blur_bg2 {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 162vh;
  left: -58vw;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#hr {
  position: absolute;
  bottom: 145vh;
  right: -1vw;
  width: 50vw;
}

#hobbies {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I'm Shardul Bhatkar</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <script defer src="script.js"></script>
  </head>
  <body>
    <div id="hero">
      <nav>
        <ul>
          <li class="hover-underline-animation"><a href="#">Home</a></li>
          <li class="hover-underline-animation"><a href="#about">About</a></li>
          <li class="hover-underline-animation"><a href="#">Services</a></li>
          <li class="hover-underline-animation"><a href="#">Get in touch</a></li>
        </ul>
      </nav>
      <img id="hey" src="hey.png" alt="">
      <img id="name" src="name.png" alt="">
      <img id="line_1" src="line_1.png" alt="">
      <img id="line_2" src="line_2.png" alt="">
    </div>
    <section id="about">
      <h1 class="hidden">About Me</h1>
      <h2 class="hidden">
        I am a 14-year-old with a passion for technology and a love for science. In addition to being a podcaster and published author, I have a keen interest in web development and enjoy playing both cricket and table tennis. I also find gaming to be a great way to unwind.

        While I may be young, I am driven to explore the ever-evolving world of technology and constantly seek to expand my knowledge and skills in this field. Thank you for taking the time to get to know me better.
      </h2>
      <img class="hidden" id="profile_pic" src="profile pic.png" alt="">
      <img class="hidden" id="india" src="india 1.png" alt="">
      <img src="blur_bg.png" alt="" id="blur_bg">
      <img src="blur_bg2.png" alt="" id="blur_bg2">
      <img id="hr" src="hr.png" alt="">
    </section>

    <section id="hobbies">
      <h1>My Hobbies</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit vel sit quasi quas. Unde laboriosam est eveniet modi culpa velit.</p>
    </section>
  </body>
</html>

P粉481035232
P粉481035232

Antworte allen(1)
P粉421119778
P粉4211197782023-09-11 08:57:09 1 Etage

您能否告诉我以下 CSS 是否有效？如果不是，您在以下 CSS 中发现了什么问题？

/* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(0, 118, 214);
    }


    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    html {
        scroll-behavior: smooth;
    }

    #hero {
        background-color: darkgray;
        height: 100vh;
    }

    #hey {
        /* position: absolute; */
        top: 228px;
        left: 46vw;
    }

    #name {
        /* position: absolute; */
        top: 39vh;
        left: 39vw;
    }

    #line_1 {
        /* position: absolute; */
        top: 50vh;
        left: 23vw;
    }

    #line_2 {
        /* position: absolute; */
        top: 50vh;
        right: 21vw;
    }

    nav {
        position: fixed;
        top: -50px;
        left: 20.7vw;
        width: 100%;
        background-image: url("navbar.png");
        background-repeat: no-repeat;
        transition: top 0.2s ease-in-out;
        font-family: 'Playfair Display', serif;
    }

    nav ul {
        margin: 0;
        padding: 0;
        position: relative;
        right: 313px;
        list-style: none;
        text-align: center;
        font-size: larger;
    }

    nav li {
        display: inline-block;
        margin: 10px;
        margin-right: 25px;
    }

    nav a {
        display: block;
        padding: 10px;
        color: #fff;
        text-decoration: none;
    }


    nav:hover {
        top: 0;
    }

    .hover-underline-animation {
        display: inline-block;
        position: relative;
        color: #ffffff;
    }

    .hover-underline-animation:after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }

    .hover-underline-animation:hover:after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    #about {
        /* position: absolute; */
        /* top: 111vh;
        left: 45vw; */
        margin: auto;
        font-family: 'Playfair Display';
        width: 29vw;
    }

    #about h1 {
        font-size: xx-large;

    }

    #about h2 {
        font-size: large;
        /* position: relative; */
        left: -13px;
        top: 48px;
    }

    #profile_pic {
        /* position: relative; */
        bottom: 161px;
        right: 305px;
    }

    #india {
        /* position: relative; */
        right: 276px;
        bottom: 163px;
        height: 56px;
    }

    .hidden {
        opacity: 0;
        transform: translateX(-100%);
        transition: all 1s;
    }

    .show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    #blur_bg {
        animation: fadeInAnimation ease 3s;
        /* position: relative; */
        bottom: 76vh;
        left: 28vw;
    }

    #blur_bg2 {
        animation: fadeInAnimation ease 3s;
        /* position: relative; */
        bottom: 162vh;
        left: -58vw;
    }

    @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    #hr {
        /* position: absolute; */
        bottom: 145vh;
        right: -1vw;
        width: 50vw;
    }

    #hobbies {
        /* position: relative; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！