个人中心
gpt4 book ai didi

html - 下拉菜单冲突

转载 作者：行者123 更新时间：2023-11-28 00:23:58 27 4
gpt4 key购买 nike

我是一名学生，正在为学校元素编写网站代码。我的水平非常初级(编码对我来说非常困难)所以如果我的问题非常业余，我深表歉意。我正在创建一个将显示明信片集合的网站。我试图让我的下拉菜单工作，但是在某些页面上它似乎可以工作，而在其他页面上却没有(主要是上面有轮播的页面)。我将发布我的代码(下面的 HTML + CSS)，但我的布局是一个主体容器，然后是顶部和底部容器。旋转木马(在底部容器中)是我收藏的明信片照片所在的位置，而下拉菜单位于顶部容器中。下拉菜单功能不正常，样式也不完全正确(“菜单”文本不会以我需要的字体显示)。尽管在同一页面上，轮播效果非常好。 

  HTML

    <!--Developed by Matthew Nielsen-->

<!DOCTYPE html>

<title>Carousel Collection</title>

<html>

<head>

  <meta name="Mattew Nielsen" content="Collection Interface">
  <link rel="stylesheet" type="text/css" href="../css/carouselStyle.css">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Neuton|Raleway" rel="stylesheet">


</head>

<body>

  <div class="bodyContainer">


    <div class="topcontainer">
      <div class="dropdown">
        <button class="dropbtn">MENU</button>
        <div class="dropdown-content">
          <a href="/index.html">Home</a>
          <a href="/pages/continents.html">Continents</a>
          <a href="#">About</a>
        </div>
      </div>

      <div class="bottomContainer">
        <div class="carousel">
          <div class="carousel-inner">
            <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
            <div class="carousel-item">
              <img src="/images/AS1.jpg">
            </div>
            <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
            <div class="carousel-item">
              <img src="/images/AS2.jpg">
            </div>
            <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
            <div class="carousel-item">
              <img src="/images/AS3.jpg">
            </div>
            <label for="carousel-3" class="carousel-control prev control-1">‹</label>
            <label for="carousel-2" class="carousel-control next control-1">›</label>
            <label for="carousel-1" class="carousel-control prev control-2">‹</label>
            <label for="carousel-3" class="carousel-control next control-2">›</label>
            <label for="carousel-2" class="carousel-control prev control-3">‹</label>
            <label for="carousel-1" class="carousel-control next control-3">›</label>
            <ol class="carousel-indicators">
              <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
              </li>
              <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
              </li>
              <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>


CSS

/* carouselStyle.css */

/*Developed by Matthew Nielsen*/

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.bodyContainer {
  height: 100%;
  width: 100%;
  background-image: url(/images/message.JPG);
  opacity: .5;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

/* Top Container + Nav Bar */

.topContainer {
  height: 50%;
  width: 100%
}

.navbar {
  overflow: hidden;
  background-color: gray;
}

.navbar a {
  float: left;
  font-family: Raleway;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Bottom Container + Carousel */

.bottomContainer {
  height: 50%;
  width: 100%
}

.carousel {
  position: relative;
  align-content: center;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
  margin-top: 26px;
}

.carousel-inner {
  position: relative;
  align-content: center;
  overflow: hidden;
  width: 100%;
}

.carousel-open:checked+.carousel-item {
  position: static;
  align-content: center;
  opacity: 100;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  align-content: center;
  height: auto;
  max-width: 100%;
}

.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}

.carousel-control.prev {
  left: 2%;
}

.carousel-control.next {
  right: 2%;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #aaaaaa;
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
  display: block;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.carousel-indicators li {
  display: inline-block;
  margin: 0 5px;
}

.carousel-bullet {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 35px;
}

.carousel-bullet:hover {
  color: #aaaaaa;
}

#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

/*
#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
} */

我很好奇是否有人看到这个问题会发现任何明显的问题或对如何解决这个问题有建议？

谢谢

最佳答案

您的下拉导航实际上非常有用!如果您注释掉 .bottomcontainer，您可以看到它在悬停时正常​​工作，并且所有链接似乎都是可点击的。

问题在于轮播的定位:

.carousel {
  position: relative; /* remove this */
  align-content: center;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
  margin-top: 26px;
}

现在，通过 position: relative;，您的旋转木马正在覆盖该网站。从技术上讲，您不能将鼠标悬停在它后面的导航上，即使您可以看到它。没有必要在您提供的代码段中使用 relative 。删除那行代码，您会发现格式没有改变，导航栏正常工作，您的轮播仍然有效。

有关 position: ; 的更多信息，请访问 CSS Tricks。 .

根据我自己的设计指南的进一步建议，我建议您将顶部和底部容器的 div 分开，如下所示:

<div class="bodyContainer">
  <div class="topcontainer">
    /* nav stuff */
  </div>
  <div class="bottomContainer">
    /* carousel stuff */
  </div>
</div>

它将清除底部容器可能不小心从您的导航栏窃取的继承样式，较少涉及的元素将帮助您解决您遇到的那些样式问题。它还将帮助您将您的网站可视化为两个独立的元素并排工作。

最后，您需要在像这样的地方用分号 (;) 结束所有样式特征。我在你的代码中注意到了其中的一些。它编译正常，但当您尝试添加另一行时会造成混淆。

.topContainer {
  height: 50%;
  width: 100%     /* <--- here */
}

关于html - 下拉菜单冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54740008/

27 4 0
文章推荐： html - 在 IE9 中单击时字体消失(自定义字体，页面上没有 Javascript)
文章推荐： c++ - 返回节点指针的函数
文章推荐： javascript - 在asp中使用__doPostBack进行回发以过滤网格
文章推荐： css - 移动设备加载页面放大
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com