Question

首先，这是一个学校项目，所以我还不熟悉编码。

但我无法弄清楚为什么我的幻灯片显示在我的幻灯片后面，当我在一台电脑上查看时。你能帮忙吗？

这是在我们尝试使用骨架制作网格并且＆＃34;规范化＆＃34;之后发生的。 CSS文件。

＆＃13;

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 4000);
}

$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});

＆＃13;

body{
	font-family: 'Open Sans', sans-serif;
	margin:0;
	width:100%;
}

header{
	width:100%;
	background:none;
	height:0px; 
	line-height:60px;
}

.logo {
	height: 70px;
	width: auto;
	background: none;
}

.navi {
	display: none;
}

.dropbtn {
	line-height: 200%;
}

.hamburger{
	background-color:black;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
}

.cross{
  background-color:black;
  position:absolute;
  top:0px;
  right:0;
  padding:13px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
}

.menu{
	z-index:1000000; 
	font-weight:bold; 
	font-size:1.5em; 
	width:100%; 
	background:#131313;  
	position:absolute; 
	text-align:center;
}

.menu ul {
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
	list-style-image: none;
}

.menu li {
	display: block;   
	padding:15px 0 15px 0; 
	border-bottom:#1d1f20 1px solid;
}

.menu li:hover{
	display: block;    
	background:black; 
	padding:15px 0 15px 0; 
	border-bottom:#1d1f20 1px solid;
}

.menu ul li a {
	text-decoration:none;  
	margin: 0px; 
	color:#fff;
}

.menu ul li a:hover {
	color: #fff; 
	text-decoration:none;
}

.menu a{
	text-decoration:none; 
	color:white;
}

.menu a:hover{
	text-decoration:none; 
	color:white;
}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}

.container {
	width: 90%;
	margin: 0 auto;
}

.slideshow {
	margin-bottom: 10px;
}
.slideshow img {
	height: auto;
	width: 100%;
}

.salepoint img {
	width: auto;
	height: 30px;
}

.salepoint {
	border: solid 0.5px;
	padding: 5px;
	margin-bottom: 20px;
	text-align: center;
}

footer {
	background: black;
}

.foot {
	color: white;
	text-align: center;
}

.socialmedia {
	margin: 0 auto;
	width: 99px;
}

.socialmedia img {
	width: 30px;
	height: auto;
}





@media (min-width: 665px){

.menu, .hamburger, .cross {
	display: none;
}

.navi {
	display: block;
	background: black;
	padding: 2px 0px;
	margin-bottom: 8px;
	text-align: center;
	font-size: 1.5em;
	z-index: 1000000;
}

.kurv {
	height: 40px;
	width: auto;
	background: none;
	float: right;
	margin-right: 15px;
	margin-top: 12px;
}

.logo2 {
	height: 70px;
	width: auto;
	background: none;
	float: left;
}

.logo {
	display: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 4px;
    overflow: hidden;
}

li {
    display: inline;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
	background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

.slideshow {
	max-width: 800px;
	margin: 15px auto 15px auto;
}
}

＆＃13;

<!DOCTYPE HTML>

<html lang="da">

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	
	<link type="text/css" rel="stylesheet" href="css/skeleton.css"/>
	<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

	<title>Herregård Møbler</title>
</head>

<body>

<header>
	<button class="hamburger">&#9776;</button>
	<button class="cross">&#735;</button>
</header>
	<nav>

<div class="navi">
<img class="logo2" src="img/logo2.png" alt="Herregård-logo">
<img class="kurv" src="img/kurv.png" alt="kurv">
<ul>
  <li><a href="#">FORSIDE</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">PRODUKTER</a>
    <div class="dropdown-content">
      <a href="#">Stole</a>
      <a href="#">Borde</a>
      <a href="#">Sofaer</a>
	  <a href="#">Kommoder</a>
    </div>
  </li>
  <li><a href="#">SHOWROOM</a></li>
   <li class="dropdown">
    <a href="#" class="dropbtn">KONTAKT</a>
    <div class="dropdown-content">
      <a href="#">Om os</a>
    </div>
  </li>
</ul>
</div>
	
<img class="logo" src="img/logo2.png" alt="Herregård-logo">
<div class="menu">
  <ul>
    <a href="#"><li>FORSIDE</li></a>
	<li class="dropdown">
    <a href="#" class="dropbtn">PRODUKTER</a>
    <div class="dropdown-content">
      <a href="#">Stole -</a>
      <a href="#">Border -</a>
      <a href="#">Sofaer -</a>
	  <a href="#">Kommoder</a>
    </div>
  </li>
	<li class="dropdown">
    <a href="#" class="dropbtn">Showroom</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropbtn">KONTAKT</a>
    <div class="dropdown-content">
      <a href="#">Om os</a>
    </div>
  </li>
  </ul>
</div>
	</nav>
	
	<article>
<div class="container">
<div class="slideshow">
<img class="mySlides" src="img/slide1.png" alt="slideshow1">
<img class="mySlides" src="img/slide2.png" alt="slideshow2">
<img class="mySlides" src="img/slide3.png" alt="slideshow3">
<img class="mySlides" src="img/slide4.png" alt="slideshow4">
</div>
<div class="salepoint">
<img src="img/levering.png" alt="lastbil">
<p>Hos Herregård Møbler tilbyder vi fri levering i hele Danmark for varer købt i vores webshop</p>
</div>
<div class="salepoint">
<img src="img/kvalitet.png" alt="kvalitet">
<p>Vi er dedikeret til altid at levere den bedst mulige kvalitet og den sikreste fragt.</p>
</div>
<div class="salepoint">
<img src="img/garanti.png" alt="garanti">
<p>Vi tilbyder op til 20 års udvidet garanti på vores møbler, hvis de registreres her.</p>
</div>
</div>
	</article>

	<footer>
<p class="foot">Find os også på</p>
<div class="socialmedia">
<img src="img/facebook.png" alt="Facebook">
<img src="img/instagram.png" alt="Instagram">
<img src="img/linkedin.png" alt="LinkedIn">
</div>
	</footer>
  
  </body>

</html>

＆＃13;

为什么我的导航下拉菜单隐藏在幻灯片后面？

0 个答案: