Div幻灯片不显示

我开始构建网站，但页面上的每张幻灯片都不显示。我显示了导航栏，但下面的所有div都显示为空白。这是我的HTML：Div幻灯片不显示

<!DOCTYPE html> 
<html> 
<head> 
<title>Michaela DeForest - Computer Science Student</title> 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 
<script src="http://jarallax.com/download/jarallax-min-0.2.js" type="text/javascript"></script> 
<script src="js/animations.js"></script> 
</head> 

<body onload="init()"> 

<ul> 
    <li><a href="#">Michaela DeForest</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">Portfolio</a></li> 
</ul> 

<section id="slide-home"> 
    <div class = "background"> 
     <div class = "container"> 
      <div class="content"> 
       <h1 id = "name">Michaela DeForest</h1> 
       <h2 id= "title">Computer Science Student at Franklin and Marshall College</h2> 
      </div> 
     </div> 
    </div> 
</section> 

<section id="slide-about"> 
    <div class= "background"> 
     <div class = "container"> 
      <div class="content"> 
       <h1>About</h1> 
       <p>I am a junior computer science student at Franklin and Marshall College.</p> 
      </div> 
     </div> 
    </div> 
</section> 

<section id= "slide-contact"> 
    <div class="background"> 
     <div class = "container"> 
      <div class="content"> 
       <h1>Contact</h1> 
       <h3>Email: [email protected]</h3> 
      </div> 
     </div> 
    </div> 
</section> 

<section id = "slide-portfolio"> 
    <div class="background"> 
     <div class = "container"> 
      <div class= "content"> 
       <h1>Portfolio</h1> 
      </div> 
     </div> 
    </div> 
</section> 

</body> 
</html>

我的CSS：

@font-face { 
    font-family:"Dense-Regular"; 
    src: url(../fonts/Dense-Regular.otf); 
} 

body, html { 
    height: 100%; 
    min-height: 100%; 
} 

section { 
    border: 1px solid black; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #3399ff; 
    width: 115%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
} 

li { 
    float: left; 
} 

li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-family: "Dense-Regular"; 
    font-size: 40px; 
} 

li a:hover { 
    background-color: #007fff 
} 

section { 
    min-width: 960px; 
    opacity: 0; 
} 

.background { 
    position: 50% 50%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
} 

.container { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 

.content { 
    max-width: 700px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

#slide-home .background { 
    background: url(../images/lightbulb.jpg); 
} 

#slide-about .background { 
    background-color: #99ccff; 
} 

#slide-contact .background { 
    background-color: #3399ff; 
} 

#slide-portfolio .background { 
    background-color: #32dcff; 
}

任何帮助将非常感激。我真的不知道我做错了什么。他们不显示

来源

2015-12-23 Michaela DeForest

你可以添加fiddle.net演示页面 – Manivannan

在这里你去@Manivannan。 https://jsfiddle.net/3hfh47ty/ –

的原因之一是，你必须：

section { 
    opacity: 0; 
}

这使得他们看不到的。

此外，divs坐在你的菜单下。

我已经在这里做了一些改变： https://jsfiddle.net/3hfh47ty/1/

来源

2015-12-23 03:46:19

这两个看起来像问题，但他们没有解决问题。 –

@MichaelaDeForest我更新了我的答案，对你的小提琴做了一些改变。我不确定你的目标是什么，但他们现在正在展示。 –

谢谢！我可以从这里出发，但是，这解决了我的问题！ –

opacity: 0;

那是你的问题，这意味着没有可视性

透明度范围从0 - 1。1，增量为1意味着完全不透明和零意味着完全隐形

来源

2015-12-23 03:46:28

我甚至没有意识到这一点，但改变这并没有解决问题。 –

Div幻灯片不显示

回答

相关问题