重叠div /内容

时间：2016-05-05 01:20:16

标签： html css

我是CSS和HTML世界的新手，每当我调整浏览器大小时，我都在努力解决内容重叠问题。如果有人可以查看我的代码并帮助我了解如何解决这个问题，这将有很大帮助！谢谢！

HTML：

<!doctype html>
<html>
<head>
<link href="java.js" rel="alternate stylesheet" type="text/javascript">
<link href="stylessheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<link href="gallery/src/paintwithlight/lightbox.css" rel="stylesheet">

<title>Neon Angels</title>
</head>

<body class="fix">
<div id="wrapper">


<div class="section black" id="section1">
<h2 id="welcome">The Neon Angels Welcome You!
<img src="wingslogo.svg" alt="" id="top">
<img src="wingslogo.svg" alt="" id="top2">
</h2>
<p>
<img src="wings.jpg" alt="wings" width="750" id="wings">
</p>
<ul class="nav">

    <li><a href="#section2" style="text-decoration:none">About Us</a></li>
    <li><a href="#section3" style="text-decoration:none">Painting with Light</a></li>
    <li><a href="#section4" style="text-decoration:none">Portraits</a></li>
    <li><a href="#section5" style="text-decoration:none">Nature</a></li>
    <li><a href="#section6" style="text-decoration:none">Contact Us</a></li>

</ul>
<div class="mouse">

<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>


</div>



<div class="section about" id="section2">
<h2 id="abouthead">About the Neon Angels</h2>
<p id="about">
    The Neon Angels specialize in painting with light photography. We absolutely love that our job consist of playing in the dark with glow sticks for hours. Our motto at Neon Angels is: "Even when it gets dark do not forget that you can glow". We are a unique company that loves abstract art, but we also do nature photography and portraits. Below you will find a video showing the process of how we work.  

</p>
 <iframe width="620" height="415" src="https://www.youtube.com/embed/Xzjy6kTZxW0" frameborder="0" allowfullscreen></iframe>

<ul class="nav">
  <li><a href="#section1" style="text-decoration:none">Welcome</a></li>
    <li><a href="#section3" style="text-decoration:none">Painting with Light</a></li>
    <li><a href="#section4" style="text-decoration:none">Portraits</a></li>
    <li><a href="#section5" style="text-decoration:none">Nature</a></li>
    <li><a href="#section6" style="text-decoration:none">Contact Us</a></li>
</ul>
<div class="mouse">

<div class="mouse-icon"  >
<span class="mouse-wheel" id="blackmouse"></span>
</div>
</div>
</div>


<div class="section paint" id="section3">
<h2 id="painthead">Painting with Light</h2>
<p id="painting">
    Painting with light is an art that takes time and rhythm. Normally we handle our sessions jamming out to music because it requires a type of rhythmic nature that only arises like  when music is involved. Please feel free to look through any of our pictures and if you too would like a painting session please visit our contact page. 
 </p>
 <div id="paintpic">
 <a href="gallery/src/paintwithlight/JPEG/angelin.jpg" data-lightbox="roadtrip" title="Inverted Angel"><img class="gallery" src="gallery/src/paintwithlight/JPEG/angelin.jpg" width="300" height="200"></a>
 <a href="gallery/src/paintwithlight/JPEG/abstract.jpg" data-lightbox="roadtrip" title="Abstract"><img class="gallery" src="gallery/src/paintwithlight/JPEG/abstract.jpg" width="300" height="200"></a>
 <a href="gallery/src/paintwithlight/JPEG/anna.jpg" data-lightbox="roadtrip" title="Anna"><img class="gallery" src="gallery/src/paintwithlight/JPEG/anna.jpg" width="300" height="200"></a>
 <a href="gallery/src/paintwithlight/JPEG/blue_light.jpg" data-lightbox="roadtrip" title="Blue Light"><img class="gallery" src="gallery/src/paintwithlight/JPEG/blue_light.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/butterfly.jpg" data-lightbox="roadtrip" title="Butterfly"><img class="gallery" src="gallery/src/paintwithlight/JPEG/butterfly.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/clash.jpg" data-lightbox="roadtrip" title="Clash"><img class="gallery" src="gallery/src/paintwithlight/JPEG/clash.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/craze.jpg" data-lightbox="roadtrip" title="Craze"><img class="gallery" src="gallery/src/paintwithlight/JPEG/craze.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/flower.jpg" data-lightbox="roadtrip" title="Flower"><img class="gallery" src="gallery/src/paintwithlight/JPEG/flower.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/greenswirl.jpg" data-lightbox="roadtrip" title="greenswirl"><img class="gallery" src="gallery/src/paintwithlight/JPEG/greenswirl.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/halfcircle.jpg" data-lightbox="roadtrip" title="halfcircle"><img class="gallery" src="gallery/src/paintwithlight/JPEG/halfcircle.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/mindblown.jpg" data-lightbox="roadtrip" title="mindblown"><img class="gallery" src="gallery/src/paintwithlight/JPEG/mindblown.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/mystic.jpg" data-lightbox="roadtrip" title="mystic"><img class="gallery" src="gallery/src/paintwithlight/JPEG/mystic.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/radiation.jpg" data-lightbox="roadtrip" title="radiation"><img class="gallery" src="gallery/src/paintwithlight/JPEG/radiation.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/rainbow.jpg" data-lightbox="roadtrip" title="rainbow"><img class="gallery" src="gallery/src/paintwithlight/JPEG/rainbow.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/stuckcircle.jpg" data-lightbox="roadtrip" title="stuck circle"><img class="gallery" src="gallery/src/paintwithlight/JPEG/stuckcircle.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/swirl.jpg" data-lightbox="roadtrip" title="swirl"><img class="gallery" src="gallery/src/paintwithlight/JPEG/swirl.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/whitelight.jpg" data-lightbox="roadtrip" title="whitelight"><img class="gallery" src="gallery/src/paintwithlight/JPEG/whitelight.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/wings.jpg" data-lightbox="roadtrip" title="wings"><img class="gallery" src="gallery/src/paintwithlight/JPEG/wings.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/yellow-blue.jpg" data-lightbox="roadtrip" title="yellow-blue"><img class="gallery" src="gallery/src/paintwithlight/JPEG/yellow-blue.jpg" width="300" height="200"></a>
<a href="gallery/src/paintwithlight/JPEG/zeus.jpg" data-lightbox="roadtrip" title="Zeus"><img class="gallery" src="gallery/src/paintwithlight/JPEG/zeus.jpg" width="300" height="200"></a>
 </div>
 <ul class="nav">
    <li><a href="#section1" style="text-decoration:none">Welcome</a></li>
    <li><a href="#section2" style="text-decoration:none">About Us</a></li>

    <li><a href="#section4" style="text-decoration:none">Nature</a></li>
    <li><a href="#section5" style="text-decoration:none">Portraits</a></li>
    <li><a href="#section6" style="text-decoration:none">Contact Us</a></li>
</ul>

 <div class="mouse">

 <div class="mouse-icon">
 <span class="mouse-wheel"></span>
 </div>
 </div>
 </div>


<div class="section nature" id="section4">
<h2 id="naturehead">Nature</h2>
<p id="nature">

Neon Angels之所以进行自然摄影，是因为我总能找到最独特的视角。地球上有许多地方人眼忽略了这一点，而这正是摄影的来源。     

                                                                                         

</div>

<ul class="nav">
    <li><a href="#section1" style="text-decoration:none">Welcome</a></li>
     <li><a href="#section2" style="text-decoration:none">About Us</a>   </li>
    <li><a href="#section3" style="text-decoration:none">Painting with Light</a></li>
    <li><a href="#section5" style="text-decoration:none">Portraits</a></li>
   <li><a href="#section6" style="text-decoration:none">Contact Us</a></li>
   </ul>
   <div class="mouse">

   <div class="mouse-icon"  >
   <span class="mouse-wheel" id="blackmouse"></span>
  </div>
</div>
</div>


<div class="section portraits" id="section5">
<h2 id="portraithead">Portraits</h2>
<p id="port">
Neon Angels Photography would love to capture you in the light. </br>
Please check out our portraits for what we could do for you!
</p>
<div id="portpic">

<a href="gallery/src/Portraits/JPEG/IMG_0679.jpg" data-lightbox="roadtrip" title="Kate"><img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0679.jpg" width="200" height="300"></a>
<a href="gallery/src/Portraits/JPEG/IMG_0789.jpg" data-lightbox="roadtrip" title="Em"><img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0789.jpg" width="200" height="300"></a>
<a href="gallery/src/Portraits/JPEG/IMG_0793.jpg" data-lightbox="roadtrip" title="Emily"><img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0793.jpg" width="200" height="300"></a>
<a href="gallery/src/Portraits/JPEG/IMG_3202.jpg" data-lightbox="roadtrip" title="Smile"><img class="gallery" src="gallery/src/Portraits/JPEG/IMG_3202.jpg" width="200" height="300"></a>

             

          

<a href="gallery/src/Portraits/JPEG/IMG_0986.jpg" data-lightbox="roadtrip" title="Davy"><img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0986.jpg" width="300" height="200"></a>



<a href="gallery/src/Portraits/JPEG/IMG_4945.jpg" data-lightbox="roadtrip" title="Davy "><img class="gallery" src="gallery/src/Portraits/JPEG/IMG_4945.jpg" width="200" height="300"></a>
</div>
<ul class="nav">
    <li><a href="#section1" style="text-decoration:none">Welcome</a></li>
     <li><a href="#section2" style="text-decoration:none">About Us</a></li>
    <li><a href="#section3" style="text-decoration:none">Painting with Light</a></li>
    <li><a href="#section4" style="text-decoration:none">Nature</a></li>
   <li><a href="#section6" style="text-decoration:none">Contact Us</a>  </li>
    </ul>

    <div class="mouse">
  <div class="mouse-icon">
  <span class="mouse-wheel"></span>
  </div>
</div>
</div>

<div class="section contact" id="section6">
<h2 id="contacthead">Contact Neon Angels</h2>
<p id="paracontact">
The Neon Angels take pride in delivering the most unique photographs around and we would love to have you as a client. Please contact Neon Angels for any quetions about paint with light photography or a consult. Thank you!
</p>
<div id="last">
 <a href="gallery/src/paintwithlight/JPEG/anna.jpg" data-lightbox="roadtrip" title="Anna"><img class="gallery" src="gallery/src/paintwithlight/JPEG/anna.jpg" width="900" height="700"></a>
 </div>
 <p> Phone Number: 859-772-2156
 </br>
 Email: neonangels@gmail.com
 </p>

 <ul class="nav">
    <li><a href="#section1" style="text-decoration:none">Welcome</a></li>
     <li><a href="#section2" style="text-decoration:none">About Us</a></li>
    <li><a href="#section3" style="text-decoration:none">Painting with Light</a></li>
    <li><a href="#section4" style="text-decoration:none">Nature</a></li>
   <li><a href="#section5" style="text-decoration:none">Portraits</a></li>
   </ul>
   <div class="mouse">

   <div class="mouse-icon"  >
   <span class="mouse-wheel" id="blackmouse"></span>
  </div>
</div>

</div>


<footer>  <div id="parawork"><i>Copyright &copy; May 2nd, 2016</i> |    <i>Neon Angels Photography</i></div> <img src="wingslogo-white2.svg" alt="" id="bottom"> 
<img src="wingslogo-white2.svg" alt="" id="bottom2"> 
</br>
<i>Email: neonangelsphotography@gmail.com</i>
</br>
</br>
<i> Phone Number: 859-772-2156</i>


</footer>
</div>
<script src="gallery/src/js/lightbox.js"></script>
</body>
</html>

CSS：

@charset "utf-8";



*{
 margin:0;
 padding:0;
}
body{

font-family:aguafina-script;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
}
#wrapper{
width: 100%;
margin: 0 auto;
}

.section{


text-shadow: 1px 1px 2px #f0f0f0;
text-align: center;
}


#top{
width: 100px;
height: 100px;  
float: right;

}
#top2{
width: 100px;
height: 100px;
float: left;

}


#port{
margin-left: 300px;
margin-right: 300px;    
padding-top: 25px;
}

#paracontact{
margin-left: 300px;
margin-right: 300px;    
padding-top: 25px;
}

.section p#about{
 color:#000000;
}

.section h2#abouthead{
background:#00FFE3; 
padding: 50px;

}


.section h2#naturehead{
background:#00FFE3; 
padding: 50px;
color: black;

}


.section #welcome{
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;


}
.black{
height: 1200px;
background: black;
}



.contact{
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
letter-spacing: .25px;
line-height: 40px;

}
.nature{
height: 1600px;
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
letter-spacing:.25px;
line-height: 40px;
}

.about{

color:#000;
background:#00FFE3;
height: 1400px;
letter-spacing: .25px;
line-height: 40px;
}

#about{
margin-left: 300px;
margin-right: 300px;    
padding-top: 25px;
}

#painthead{
padding: 50px;  
}

#contacthead{
margin: 50px;   
}

#nature{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;  
}

.paint{
height: 1700px; 
background: black;
color: white;
line-height: 40px;

}


#paintpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;

 }

#portpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
padding-top: 50px;
}


 #natpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
padding-top:50px;   
}
.portraits{
background: #000000;
color: white;
height: 1400px;
letter-spacing: .25px;
line-height: 40px;

}
#painting{
margin-right: 300px;
margin-left: 300px;
padding-bottom: 75px;
letter-spacing: .25px;
}


iframe{
margin-top: 50px;
margin-bottom: 60px;
border:thick solid #FF0086;
border-width: 30px;
}


.nav{

list-style: none;
position: absolute;
 left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

}


.black ul li{

white-space: nowrap;
display:inline;
color:#aaa;
float:left;

}
.black ul li a{
padding:0px 10px; 
color:#f0f0f0;
 white-space: nowrap;
}
.black ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
 white-space: nowrap;
}
.about ul li{



 display: inline;
 color:#aaa;
 padding:2px;


}
.about ul li a{
 color:#000000;

}
.about ul li a:hover{
text-decoration: none;

font-style: normal;
font-weight: 400;
font-family: aguafina-script;
color:#FF8A91;
}

#portraithead{
padding: 50px;  
}

.nature ul li{
float:left;
padding:2px;
margin:5px;
color:#aaa;
}
.nature ul li a{
display:block;
color:#222;
}
.nature ul li a:hover{
text-decoration:none;
color:#000;
}


.portraits ul li{

padding: 5px;
margin:5px;
display:inline;
color:#aaa;
float:left;



}
.paint ul li a{

color:#f0f0f0;

}
.paint ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
}

.paint ul li{

padding: 5px;
margin:5px;
display:inline;
color:#aaa;
float:left;



}
.portraits ul li a{

 color:#f0f0f0;

}
.portraits ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
 font-family: aguafina-script;
}

.contact ul li{
padding: 5px;
margin:5px;
display: inline;
color:#aaa;
float:left;
margin-top: 80px;
}
.contact ul li a{
 color:#000000;
}
.contact ul li a:hover{
text-decoration: none;

font-style: normal;
font-weight: 400;
font-family: aguafina-script;
color:#FF8A91;
}

 .mouse{

 margin-top: 10%;
 margin-bottom:20%;
 margin-left:50%;


 width: 100px;
}
.mouse-icon{
width: 25px;
height: 45px;
border: 2px solid white;
border-radius: 15px;
cursor: pointer;
position: relative;
text-align: center;
}
.mouse-wheel{
height: 6px;
margin: 2px auto 0;
display: block;
width: 3px;
background-color: white;
border-radius: 50%;
-webkit-animation: 1.6s ease infinite wheel-up-down;
-moz-animation: 1.6s ease infinite wheel-up-down;
 animation: 1.6s ease infinite wheel-up-down;
}

#blackmouse{
background-color:#000000;   
}




@-webkit-keyframes wheel-up-down {
0% 
{
    margin-top: 2px;
    opacity: 0;
   }
30% {
    opacity: 1;
}
100% {
    margin-top: 20px;
    opacity: 0;
    }
}
@-moz-keyframes wheel-up-down {
0% {
    margin-top: 2px;
    opacity: 0;
   }
 30% {
    opacity: 1;
 }
 100% {
    margin-top: 20px;
    opacity: 0;
  }
}@keyframes wheel-up-down {
  0% {
    margin-top: 2px;
    opacity: 0;
 }
 30% {
    opacity: 1;
    }
100% {
    margin-top: 20px;
    opacity: 0;
}
}




footer{ 

background-color:black;

text-align:center;
color: white;
padding: 30px;
height: 200px;
 font-size:20px;

}
#bottom{
width: 100px;
height: 100px;  
 float: right;


}
#bottom2{
width: 100px;
height: 100px;
float: left;


}
#parawork{
margin-top: 50px;   
}

#last{
padding-top: 50px;
padding-bottom: 50px;   
}

1 个答案:

答案 0 :(得分：0)

我昨天发布了关于你的响应视频的部分。也许你没有看到代码，我会照顾我看到我的孩子们在那里你剩下的一段时间了

/* Flexible iFrame */

.flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>

相关问题
最新问题