为什么当我为轮播添加样式时我的菜单消失了？

问题描述 投票：0回答：2

我尝试创建两个 CSS 文件，但不起作用。我在下面加入了我的代码、HTML、标题 CSS 和 Carousel CSS 以及 javascript，以创建响应式标题。

从我发送的屏幕截图中您能看出问题所在吗？ 。 enter image description here 我想创建一个响应式标题，其中包含汉堡菜单和网站标题下方的幻灯片轮播。 还有另一个问题，当我删除两个 CSS 文件之一时，菜单出现，但链接消失了，只有一个汉堡菜单。我真的需要一些帮助来解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style2.css">
   <script src="script.js"></script>
</head>

<body>
    <header> 
        <nav class="navbar"> 
            <div class="navbar-container container">
            <div class="logo-img">  
                <img src="image/logo.jpg" width="200px" height="200px" alt="logo"> 
            </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 href="#">Home</a></li>
            <li><a href="#">About us </a></li>
            <li><a href="#">Accordion menu</a></li>
            <li><a href="#">Tab gallery</a></li>
            <li><a href="#">Quiz</a></li>
            <li><a href="#">Contact us</a></li>
          </ul>
        </div>
        </div>
        </div>
      </nav>
    </header>  
    <section aria-label="Newest Photos">
        <div class="carousel"></div>
        <button class ="carousel-button-prev">&#8656;</button>
        <button class ="carousel-button-next">&#8658;</button>
        <ul>
        <li class= "slide"data-active>
          <img src="image/woman-3597095_1280.jpg" alt="woman developer">
        </li>
        <li class= "slide">
          <img src="image/web-design-3411373_1280.jpg" alt="web design">
        </li>
        <li class= "slide">
          <img src="image/workspace-2443050_1280.jpg" alt="workspace">
        </li>
        <li class= "slide">
          <img src="image/code-1076536_1280.jpg" alt="coding">
        </li>
    </ul>
    </section
</body>
</html>

.logo-img {
    float: right;
    margin-right: 100px;
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f6f6;
    color: black;

}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.navbar-links {
    display: flex;
    margin-left: auto;
    padding-right: 50px;

}

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

.navbar-links li {
    list-style: none;
    margin-left: 50px;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.navbar-links li:hover {
    background-color: #8379ff;
    border-radius: 15px;

}

.toggle-button {
    position: absolute;
    top: .75rem;
    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) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

.toggle-button {
    display: flex;
}

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

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

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

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

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

body {
    margin: 0;
    padding: 0;
}

*,
*::before *::after {
    box-sizing: border-box;
}

.carousel {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.carousel>ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.slide>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}

.slide[data-active] {
    opacity: 1;
}

.carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 4rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .5rem;
    background-color: rgba(0, 0, 0, .1);
}

.carousel-button:hover,
.carousel-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
    outline: 1px solid black;
}

.carousel-button.prev {
    left: 1rem;
}

.carousel-button.next {
    right: 1rem;
}

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

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})
javascript html css-selectors carousel response-headers
2个回答
0
投票

首先，代码的固定版本（单击“显示代码片段”，然后单击“运行”按钮）。

document.addEventListener("DOMContentLoaded", function() {
  const toggleButton = document.getElementsByClassName('toggle-button')[0]
  const navbarLinks = document.getElementsByClassName('navbar-links')[0]
  
  toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
  })
})
/****** style.css *******/
.logo-img {
    float: right;
    margin-right: 100px;
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f6f6;
    color: black;

}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.navbar-links {
    display: flex;
    margin-left: auto;
    padding-right: 50px;

}

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

.navbar-links li {
    list-style: none;
    margin-left: 50px;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.navbar-links li:hover {
    background-color: #8379ff;
    border-radius: 15px;

}

.toggle-button {
    position: absolute;
    top: .75rem;
    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) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

.toggle-button {
    display: flex;
}

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

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

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

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

.navbar-links.active {
    display: flex;
}
/****** style2.css *******/
body {
    margin: 0;
    padding: 0;
}

*,
*::before *::after {
    box-sizing: border-box;
}

.carousel {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.carousel>ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.slide>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}

.slide[data-active] {
    opacity: 1;
}

.carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 4rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .5rem;
    background-color: rgba(0, 0, 0, .1);
}

.carousel-button:hover,
.carousel-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
    outline: 1px solid black;
}

.carousel-button.prev {
    left: 1rem;
}

.carousel-button.next {
    right: 1rem;
}
/***** css addition *****/
.toggle-button {
    z-index: 99;
}
.navbar-links {
    position: relative;
    z-index: 99;
}
@media (max-width:480px) {
    .logo-img {
        margin-right: 0px;
    }
    .navbar-links ul {
        width: 100%;
        flex-direction: column;
        margin-top: 50px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home page</title>
    <!--
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style2.css">
    -->
   <script src="script.js"></script>
</head>
<body>
    <header> 
        <nav class="navbar"> 
            <div class="navbar-container container">
              <div class="logo-img">  
                  <img src="https://placehold.co/200x200" width="200px" height="200px" alt="logo"> 
              </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 href="#">Home</a></li>
                  <li><a href="#">About us </a></li>
                  <li><a href="#">Accordion menu</a></li>
                  <li><a href="#">Tab gallery</a></li>
                  <li><a href="#">Quiz</a></li>
                  <li><a href="#">Contact us</a></li>
                </ul>
              </div>
            </div>
        <!-- </div> -->
      </nav>
    </header>  
    <section aria-label="Newest Photos">
        <div class="carousel"></div>
        <button class ="carousel-button-prev">&#8656;</button>
        <button class ="carousel-button-next">&#8658;</button>
        <ul>
          <li class= "slide" data-active>
            <img src="https://placehold.co/1000x151" alt="woman developer">
          </li>
        <li class= "slide">
          <img src="https://placehold.co/1000x152" alt="web design">
        </li>
        <li class= "slide">
          <img src="https://placehold.co/1000x153" alt="workspace">
        </li>
        <li class= "slide">
          <img src="https://placehold.co/1000x154" alt="coding">
        </li>
    </ul>
  <!-- </section -->
    </section>
</body>
</html>

说明

  1. 您原来的 HTML 标记有一些错误 - 第一个是额外的结束语 

    div
    。第二个是未封闭的
    </section
    。我将这两个内容留在了 HTML 注释中。

  2. 为了让事情更容易复制，我用来自 placehold.co 的占位符替换了您的图像。此外，

    style.css
    、
    style2.css
    和
    script.js
    的内容只是简单地放置在 Stackoverflow 编辑器中各自的部分中。为了清楚地表明一个 CSS 文件的结束位置和另一个 CSS 文件的开始位置，我插入了 CSS 注释 - 例如 
    /***** style.css *****/
    。

  3. 我将您的原始代码包装在事件处理程序中，该事件处理程序等待内容加载，然后应用适当的事件处理程序（

    click
    ，在您的情况下）。这并不是绝对必要的。

  4. CSS 修复了丢失的汉堡包图标和链接，仅使用 

    z-index
    代替 
    .toggle-button
    和 
    .navbar-links
    - 这些存在，但不可见，因为徽标与它们重叠。提供 
    z-index
    将菜单和链接放置在徽标上方的图层上。在我提供的代码中，修复位于 Stackoverflow 代码编辑器的 CSS 部分的最底部。

为了满足您的新要求，我添加了

@media
CSS 查询。另外，靠近 
style.css
最后的原始 CSS 略有改变 - 我已经删除了 
flex-direction: column
的 
.navbar-links ul
。

-1
投票

感谢您的回答，我再次与您联系，因为我认为我的代码中可能存在一些 CSS 属性冲突。正如您所注意到的，我创建了 2 个 CSS 文件，一个用于标题，另一个用于轮播。如果我删除轮播 CSS 文件的链接，我就可以看到标题。感谢您的更正，我注意到汉堡菜单现在可以单击并显示菜单。然而，我想实现的结果是导航链接在计算机上应该是水平的。在移动设备上，网站菜单应该与您使用汉堡菜单创建的方式相同。您还可以看一下轮播的 CSS 属性吗，因为它不起作用。非常感谢您的帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.