cari

Rumah  >  Soal Jawab  >  teks badan

Benamkan penyasaran

Saya sedang cuba meletakkan kedudukan benaman antara imej dan tengah skrin. Untuk mencapai matlamat ini, saya membenamkan bahagian NBA Google News ke dalam tapak web saya menggunakan https://rss.app/. Jika anda memerlukan fail CSS, jangan ragu untuk bertanya. Saya telah bergelut dengan perkara ini untuk seketika dan sangat menghargai sebarang bantuan yang anda boleh berikan. 

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body>

  <nav class="navbar">
    <div class="content">
      <div class="logo">
        <a href="home.html">Home</a>
      </div>
      <ul class="menu-list">
        <div class="icon cancel-btn">
          <i class="fas fa-times"></i>
        </div>
        <li><a href="home.html">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="records.html">Records</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="images.html">Images</a></li>
      </ul>
      <div class="icon menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>
  <div class="banner">
    <div style="margin-top: 1000;">
      <rssapp-carousel id="8ywhL4ZjvQvQv5Zz"></rssapp-carousel>
      <script src="https://widget.rss.app/v1/carousel.js" type="text/javascript" async></script>
    </div>
  </div>
  <div class="about">
    <script>
      const body = document.querySelector("body");
      const navbar = document.querySelector(".navbar");
      const bannerTitle = document.querySelector(".bannerTitle");
      const menuBtn = document.querySelector(".menu-btn");
      const cancelBtn = document.querySelector(".cancel-btn");
      menuBtn.onclick = () => {
        navbar.classList.add("show");
        menuBtn.classList.add("hide");
        body.classList.add("disabled");
      }
      cancelBtn.onclick = () => {
        body.classList.remove("disabled");
        navbar.classList.remove("show");
        menuBtn.classList.remove("hide");
      }
      window.onscroll = () => {
        this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
        this.scrollY > 20 ? bannerTitle.classList.add("sticky") : bannerTitle.classList.remove("sticky");
      }
    </script>


</body>

</html>```

P粉709644700P粉709644700509 hari yang lalu685

membalas semua(1)saya akan balas

  • P粉267791326

    P粉2677913262023-09-15 12:25:42

    Jika saya faham betul, adakah ini perangai yang anda mahukan?

    https://jsfiddle.net/u2qtnLkv/

    <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body>

  <nav class="navbar">
    <div class="content">
      <div class="logo">
        <a href="home.html">Home</a>
      </div>
      <ul class="menu-list">
        <div class="icon cancel-btn">
          <i class="fas fa-times"></i>
        </div>
        <li><a href="home.html">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="records.html">Records</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="images.html">Images</a></li>
      </ul>
      <div class="icon menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>
  <div class="banner bannerTitle">
    <div style="margin-top: 1000;">
      <rssapp-carousel id="8ywhL4ZjvQvQv5Zz"></rssapp-carousel>
      <script src="https://widget.rss.app/v1/carousel.js" type="text/javascript" async></script>
    </div>
  </div>
  <div class="about">
    <script>
      const body = document.querySelector("body");
      const navbar = document.querySelector(".navbar");
      const bannerTitle = document.querySelector(".bannerTitle");
      const menuBtn = document.querySelector(".menu-btn");
      const cancelBtn = document.querySelector(".cancel-btn");
      menuBtn.onclick = () => {
        navbar.classList.add("show");
        menuBtn.classList.add("hide");
        body.classList.add("disabled");
      }
      cancelBtn.onclick = () => {
        body.classList.remove("disabled");
        navbar.classList.remove("show");
        menuBtn.classList.remove("hide");
      }
      window.onscroll = () => {
        this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
        this.scrollY > 20 ? bannerTitle.classList.add("sticky") : bannerTitle.classList.remove("sticky");
      }
    </script>
    </div>

</body>

</html>

    CSS:

    rssapp-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* ajuste a altura conforme necessário */
}

    Ingat bahawa kelas

    缺少结束标签。另请记住，bannerTitle anda tidak digunakan, yang mungkin memecahkan javascript yang memintanya.

    balas
    0
  • Batalbalas