如何删除导航栏上图像幻灯片的重叠？

【问题标题】：How to remove overlapping of image slide show on my Navbar?如何删除导航栏上图像幻灯片的重叠？
【发布时间】：2021-01-04 08:57:15
【问题描述】：

我创建了这个网站，一切似乎都正常，但唯一的问题是我的图像滑块重叠在我的导航栏上。我已经尝试了几乎所有的方法来修复它......但它似乎不起作用......我为我的导航栏和z-index: 1; 为我的滑块设置了z-index: 1;。也是一样的。

如果你能解决这个问题将不胜感激！

const carouselSlide = document.querySelector('.slides');
const carouselImages = document.querySelectorAll('.slides img');

// Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

// Counter
let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

// Button Listeners

nextBtn.addEventListener('click', () => {
    if (counter >= carouselImages.length - 1) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

prevBtn.addEventListener('click', () => {
    if (counter <= 0) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

carouselSlide.addEventListener("transitionend", () => {
    if (carouselImages[counter].id === 'lastClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - 2;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
    if (carouselImages[counter].id === 'firstClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
});

const toggleButton = document.getElementsByClassName("toggle-button")[0]
const navbarLinks = document.getElementsByClassName("navbar-links")[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
});

  function HideScrollbar() {
    var style = document.createElement("style");
    style.innerHTML = `body::-webkit-scrollbar {display: none;}`;
    document.head.appendChild(style);
  }
/*  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  transition: 5s ease;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 30px 0 0;
}

/* This is to remove the scroll 
bar but it is functional */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

header {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 1);
  position: sticky;
  top: 0px;
  background: #a9a9a9;
}

.navbar {
  min-height: 10vh;
  margin: auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav h1,
nav ul {
  font-size: 1.5rem;
  flex: 1;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

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

/* Sections */
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  font-size: 5rem;
  color: whitesmoke;
}

.section1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/home.jpeg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.section2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/temple.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  animation: text 2s 1;
}
.section3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/contact.jpg);
  height: 100vh;
  background-size: cover;
  background-position: cover;
}

.button {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  animation: none;
}

.btn {
  border: 1px solid #fff;
  padding: 10px 30px;
  color: #fff;
  text-decoration: none;
}

.btn:hover {
  background-color: whitesmoke;
  color: black;
  transition: 1s ease;
}

.bubble {
  position: absolute;
  z-index: -2;
  transform: scale(2);
  transition: all 0.5s ease;
}

/* ---------- Navbar ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.navbar {
  z-index: 1000;
  display: flex;
  align-items: center;
  background-color: #a9a9a9;
  color: black;
  list-style: none;
  overflow: hidden;
}

.brand-title {
  font-size: 1.5rem;
  margin: 1rem;
}

.navbar-links {
  height: 100%;
}

.navbar-links ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 1rem;
}

.navbar-links li:hover {
  background-color: grey;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: black;
  border-radius: 10px;
}

@media (max-width: 800px) {
  .toggle-button {
    display: flex;
  }

  .navbar-links {
    display: none;
    width: 100%;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul {
    width: 100%;
    flex-direction: column;
  }

  .navbar-links ul li {
    text-align: center;
  }

  .navbar-links ul li a {
    padding: 0.5rem 1rem;
  }

  .navbar-links.active {
    display: flex;
  }
}

/* Cursor */
.cursor {
  transition-timing-function: ease-out;
  background-color: red;
  border-radius: 5px;
  height: 10px;
  transition-duration: 500ms;
  transform: translateX(-50%) translateY(-50%);
  position: fixed;
  width: 10px;
}

@keyframes text {
  0% {
    color: black;
    margin-bottom: -40px;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}

@media screen and (max-width: 500px) {
  .button {
    display: none;
  }
  @keyframes text {
    display {
      display: none;
    }
  }
}

/* --------- Image Slider --------- */
.slider {
  z-index: 1;
  width: 71.5%;
  margin: auto;
  overflow: hidden;
  display: flex;
}

.slides {
  display: flex;
  width: 100%;
  height: 500px;
}

#prevBtn {
  position: absolute;
  top: 160%;
  z-index: 10;
  left: 5%;
  font-size: 30px;
  color: white;
  opacity: 0.8;
  cursor: pointer;
}

#nextBtn {
  position: absolute;
  top: 160%;
  z-index: 10;
  right: 5%;
  font-size: 30px;
  color: white;
  opacity: 0.8;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- title -->
        <title>Gab's Web</title>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" 
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" 
        crossorigin="anonymous"/>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <!-- Main Header -->
        <header>
            <!-- Navbar -->
            <nav class="navbar">
                <div class="brand-title">Gab's Web</div>
                <a href="#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="navbar-links">
                    <ul>
                        <li><a class="active" href="#home">Home</a></li>
                        <li><a href="#templates">Template</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <div class="bubble"></div>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- Pages -->
        <main>
            <section id="home" class="section1">Home
                <div class="button">
                    <a id="btn1" href="https://www.youtube.com/channel/UC1SalOP2ZiO9fK-yxPtYF3A" class="btn">Channel</a>
                    <a id="btn2" href="#" class="btn">Sponsor</a>
                </div>
            </section>
            <section id="templates" class="section2">
                <!-- Image Slider Start -->
                    <div class="slider">
                        <i class="fas fa-arrow-left" id="prevBtn"></i>
                        <i class="fas fa-arrow-right" id="nextBtn"></i>
                        <div class="slides">
                            <img src="../Basic/components/img-5.jpg" id="lastClone" alt="">
                            <img src="../Basic/components/img-1.jpg" alt="">
                            <img src="../Basic/components/img-2.jpg" alt="">
                            <img src="../Basic/components/img-3.jpg" alt="">
                            <img src="../Basic/components/img-4.jpg" alt="">
                            <img src="../Basic/components/img-5.jpg" alt="">
                            <img src="../Basic/components/img-1.jpg" id="firstClone" alt="">
                        </div>
                    <!-- Image Slider End -->
                </div>
            </section>
            <section id="contact" class="section3">Contact</section>
            <!-- Buttons -->
        </main>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="../Temple1/app.js"></script>
    </body>
</html>

【问题讨论】：

    标签： javascript html css web web-development-server


    【解决方案1】：

    请试试这个代码

    header {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 1);
    position: sticky;
    top: 0px;
    background: #a9a9a9;
    z-index: 1;
}

    【讨论】：

      【解决方案2】：

      在header中添加z-index

      header {
   z-index: 100;
}


      const carouselSlide = document.querySelector('.slides');
const carouselImages = document.querySelectorAll('.slides img');

// Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

// Counter
let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

// Button Listeners

nextBtn.addEventListener('click', () => {
    if (counter >= carouselImages.length - 1) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

prevBtn.addEventListener('click', () => {
    if (counter <= 0) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

carouselSlide.addEventListener("transitionend", () => {
    if (carouselImages[counter].id === 'lastClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - 2;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
    if (carouselImages[counter].id === 'firstClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
});

const toggleButton = document.getElementsByClassName("toggle-button")[0]
const navbarLinks = document.getElementsByClassName("navbar-links")[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
});

  function HideScrollbar() {
    var style = document.createElement("style");
    style.innerHTML = `body::-webkit-scrollbar {display: none;}`;
    document.head.appendChild(style);
  }
      /*  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  transition: 5s ease;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 30px 0 0;
}

/* This is to remove the scroll 
bar but it is functional */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

header {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 1);
  position: sticky;
  top: 0px;
  background: #a9a9a9;
  z-index: 100; /*Added z-index here*/
}

.navbar {
  min-height: 10vh;
  margin: auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav h1,
nav ul {
  font-size: 1.5rem;
  flex: 1;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

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

/* Sections */
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  font-size: 5rem;
  color: whitesmoke;
}

.section1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/home.jpeg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.section2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/temple.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  animation: text 2s 1;
}
.section3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/contact.jpg);
  height: 100vh;
  background-size: cover;
  background-position: cover;
}

.button {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  animation: none;
}

.btn {
  border: 1px solid #fff;
  padding: 10px 30px;
  color: #fff;
  text-decoration: none;
}

.btn:hover {
  background-color: whitesmoke;
  color: black;
  transition: 1s ease;
}

.bubble {
  position: absolute;
  z-index: -2;
  transform: scale(2);
  transition: all 0.5s ease;
}

/* ---------- Navbar ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.navbar {
  z-index: 1000;
  display: flex;
  align-items: center;
  background-color: #a9a9a9;
  color: black;
  list-style: none;
  overflow: hidden;
}

.brand-title {
  font-size: 1.5rem;
  margin: 1rem;
}

.navbar-links {
  height: 100%;
}

.navbar-links ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 1rem;
}

.navbar-links li:hover {
  background-color: grey;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: black;
  border-radius: 10px;
}

@media (max-width: 800px) {
  .toggle-button {
    display: flex;
  }

  .navbar-links {
    display: none;
    width: 100%;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul {
    width: 100%;
    flex-direction: column;
  }

  .navbar-links ul li {
    text-align: center;
  }

  .navbar-links ul li a {
    padding: 0.5rem 1rem;
  }

  .navbar-links.active {
    display: flex;
  }
}

/* Cursor */
.cursor {
  transition-timing-function: ease-out;
  background-color: red;
  border-radius: 5px;
  height: 10px;
  transition-duration: 500ms;
  transform: translateX(-50%) translateY(-50%);
  position: fixed;
  width: 10px;
}

@keyframes text {
  0% {
    color: black;
    margin-bottom: -40px;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}

@media screen and (max-width: 500px) {
  .button {
    display: none;
  }
  @keyframes text {
    display {
      display: none;
    }
  }
}

/* --------- Image Slider --------- */
.slider {
  z-index: 1;
  width: 71.5%;
  margin: auto;
  overflow: hidden;
  display: flex;
}

.slides {
  display: flex;
  width: 100%;
  height: 500px;
}

#prevBtn {
  position: absolute;
  top: 160%;
  z-index: 10;
  left: 5%;
  font-size: 30px;
  color: white;
  opacity: 0.8;
  cursor: pointer;
}

#nextBtn {
  position: absolute;
  top: 160%;
  z-index: 10;
  right: 5%;
  font-size: 30px;
  color: white;
  opacity: 0.8;
  cursor: pointer;
}
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- title -->
        <title>Gab's Web</title>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" 
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" 
        crossorigin="anonymous"/>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <!-- Main Header -->
        <header>
            <!-- Navbar -->
            <nav class="navbar">
                <div class="brand-title">Gab's Web</div>
                <a href="#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="navbar-links">
                    <ul>
                        <li><a class="active" href="#home">Home</a></li>
                        <li><a href="#templates">Template</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <div class="bubble"></div>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- Pages -->
        <main>
            <section id="home" class="section1">Home
                <div class="button">
                    <a id="btn1" href="https://www.youtube.com/channel/UC1SalOP2ZiO9fK-yxPtYF3A" class="btn">Channel</a>
                    <a id="btn2" href="#" class="btn">Sponsor</a>
                </div>
            </section>
            <section id="templates" class="section2">
                <!-- Image Slider Start -->
                    <div class="slider">
                        <i class="fas fa-arrow-left" id="prevBtn"></i>
                        <i class="fas fa-arrow-right" id="nextBtn"></i>
                        <div class="slides">
                            <img src="../Basic/components/img-5.jpg" id="lastClone" alt="">
                            <img src="../Basic/components/img-1.jpg" alt="">
                            <img src="../Basic/components/img-2.jpg" alt="">
                            <img src="../Basic/components/img-3.jpg" alt="">
                            <img src="../Basic/components/img-4.jpg" alt="">
                            <img src="../Basic/components/img-5.jpg" alt="">
                            <img src="../Basic/components/img-1.jpg" id="firstClone" alt="">
                        </div>
                    <!-- Image Slider End -->
                </div>
            </section>
            <section id="contact" class="section3">Contact</section>
            <!-- Buttons -->
        </main>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="../Temple1/app.js"></script>
    </body>
</html>

      【讨论】：

      • 为什么要使用像 100 这样的数字？
      【解决方案3】：

      您可以在.header 上添加z-index: 2;。没有必要像 10000 这样疯狂的数字，这只会在开发过程中使事情进一步复杂化。

      如果您不知道，请注意，具有 z-index 的元素需要对它们具有 position: relative | absolute | sticky:（3 个中的 1 个），在您的情况下，您有粘性，只是说这是一个常见的z-index 错过的事情。

      在下面的示例中，我还删除了导航栏上的z-index: 1000;。

      const carouselSlide = document.querySelector('.slides');
const carouselImages = document.querySelectorAll('.slides img');

// Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

// Counter
let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

// Button Listeners

nextBtn.addEventListener('click', () => {
    if (counter >= carouselImages.length - 1) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

prevBtn.addEventListener('click', () => {
    if (counter <= 0) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

carouselSlide.addEventListener("transitionend", () => {
    if (carouselImages[counter].id === 'lastClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - 2;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
    if (carouselImages[counter].id === 'firstClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
});

const toggleButton = document.getElementsByClassName("toggle-button")[0]
const navbarLinks = document.getElementsByClassName("navbar-links")[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
});

  function HideScrollbar() {
    var style = document.createElement("style");
    style.innerHTML = `body::-webkit-scrollbar {display: none;}`;
    document.head.appendChild(style);
  }
      /*  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  transition: 5s ease;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 30px 0 0;
}

/* This is to remove the scroll 
bar but it is functional */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

header {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 1);
  position: sticky;
  top: 0px;
  background: #a9a9a9;
  z-index: 2;
}

.navbar {
  min-height: 10vh;
  margin: auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav h1,
nav ul {
  font-size: 1.5rem;
  flex: 1;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

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

/* Sections */
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  font-size: 5rem;
  color: whitesmoke;
}

.section1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/home.jpeg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.section2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/temple.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  animation: text 2s 1;
}
.section3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../Basic/components/contact.jpg);
  height: 100vh;
  background-size: cover;
  background-position: cover;
}

.button {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  animation: none;
}

.btn {
  border: 1px solid #fff;
  padding: 10px 30px;
  color: #fff;
  text-decoration: none;
}

.btn:hover {
  background-color: whitesmoke;
  color: black;
  transition: 1s ease;
}

.bubble {
  position: absolute;
  z-index: -2;
  transform: scale(2);
  transition: all 0.5s ease;
}

/* ---------- Navbar ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  align-items: center;
  background-color: #a9a9a9;
  color: black;
  list-style: none;
  overflow: hidden;
}

.brand-title {
  font-size: 1.5rem;
  margin: 1rem;
}

.navbar-links {
  height: 100%;
}

.navbar-links ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 1rem;
}

.navbar-links li:hover {
  background-color: grey;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: black;
  border-radius: 10px;
}

@media (max-width: 800px) {
  .toggle-button {
    display: flex;
  }

  .navbar-links {
    display: none;
    width: 100%;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul {
    width: 100%;
    flex-direction: column;
  }

  .navbar-links ul li {
    text-align: center;
  }

  .navbar-links ul li a {
    padding: 0.5rem 1rem;
  }

  .navbar-links.active {
    display: flex;
  }
}

/* Cursor */
.cursor {
  transition-timing-function: ease-out;
  background-color: red;
  border-radius: 5px;
  height: 10px;
  transition-duration: 500ms;
  transform: translateX(-50%) translateY(-50%);
  position: fixed;
  width: 10px;
}

@keyframes text {
  0% {
    color: black;
    margin-bottom: -40px;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}

@media screen and (max-width: 500px) {
  .button {
    display: none;
  }
  @keyframes text {
    display {
      display: none;
    }
  }
}

/* --------- Image Slider --------- */
.slider {
  z-index: 1;
  width: 71.5%;
  margin: auto;
  overflow: hidden;
  display: flex;
}

.slides {
  display: flex;
  width: 100%;
  height: 500px;
}

#prevBtn {
  position: absolute;
  top: 160%;
  z-index: 10;
  left: 5%;
  font-size: 30px;
  color: white;
  opacity: 0.8;
  cursor: pointer;
}

#nextBtn {
  position: absolute;
  top: 160%;
  z-index: 10;
  right: 5%;
  font-size: 30px;
  color: white;
  opacity: 0.8;
  cursor: pointer;
}
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- title -->
        <title>Gab's Web</title>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" 
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" 
        crossorigin="anonymous"/>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <!-- Main Header -->
        <header>
            <!-- Navbar -->
            <nav class="navbar">
                <div class="brand-title">Gab's Web</div>
                <a href="#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="navbar-links">
                    <ul>
                        <li><a class="active" href="#home">Home</a></li>
                        <li><a href="#templates">Template</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <div class="bubble"></div>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- Pages -->
        <main>
            <section id="home" class="section1">Home
                <div class="button">
                    <a id="btn1" href="https://www.youtube.com/channel/UC1SalOP2ZiO9fK-yxPtYF3A" class="btn">Channel</a>
                    <a id="btn2" href="#" class="btn">Sponsor</a>
                </div>
            </section>
            <section id="templates" class="section2">
                <!-- Image Slider Start -->
                    <div class="slider">
                        <i class="fas fa-arrow-left" id="prevBtn"></i>
                        <i class="fas fa-arrow-right" id="nextBtn"></i>
                        <div class="slides">
                            <img src="../Basic/components/img-5.jpg" id="lastClone" alt="">
                            <img src="../Basic/components/img-1.jpg" alt="">
                            <img src="../Basic/components/img-2.jpg" alt="">
                            <img src="../Basic/components/img-3.jpg" alt="">
                            <img src="../Basic/components/img-4.jpg" alt="">
                            <img src="../Basic/components/img-5.jpg" alt="">
                            <img src="../Basic/components/img-1.jpg" id="firstClone" alt="">
                        </div>
                    <!-- Image Slider End -->
                </div>
            </section>
            <section id="contact" class="section3">Contact</section>
            <!-- Buttons -->
        </main>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="../Temple1/app.js"></script>
    </body>
</html>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-06-22
        • 2021-11-29
        • 2019-08-03
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode