2017-12-18 26 views
0

嘿家伙我不知道我的代码有什么问题。但page3溢出page2。但我需要他们一个接一个来。我复制粘贴的page2,只是改变了类名。看不到第三个div。溢出另一个

.main { 
 
    color: white; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url("landbackground2.jpeg"); 
 
    background-size: cover; 
 
    background-position: center bottom; 
 
} 
 

 
.overlay { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.main-content { 
 
    padding: 50px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate3d(-50%, -50%, 0); 
 
} 
 

 
.icon { 
 
    padding: 7px; 
 
    display: inline-block; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    border-radius: 50%; 
 
    font-size: 20px; 
 
    float: right; 
 
} 
 

 
.logo { 
 
    font-size: 20px; 
 
    display: inline-block; 
 
} 
 

 
.header { 
 
    z-index: 100; 
 
    width: 100%; 
 
    position: fixed; 
 
    padding: 20px 20px; 
 
} 
 

 

 
#main-h1 { 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    font-family: 'Indie Flower', cursive; 
 
} 
 

 

 

 
/* NOTE: PAGE 2 */ 
 

 

 
.page2 { 
 
    position: absolute; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url("page2.jpg"); 
 
    background-size: cover; 
 
    background-position: center; 
 

 
} 
 

 
.page2-content { 
 
    padding: 20px 30px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 

 
} 
 

 
a { 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    border: 1px solid white; 
 
    border-radius: 5px; 
 
    color: white; 
 
    transition: 0.5s; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    box-shadow: white 0px 0px 20px; 
 
} 
 

 
.bg-attach { 
 
    background-attachment: fixed; 
 
} 
 

 
.page3 { 
 
    position: absolute; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url(".jpg"); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 

 

 
.fuck { 
 
    position: relative; 
 
    display: block; 
 
    height: 100vh; 
 
    background: pink; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\bootstrap-4.0.0-beta.2\dist\css\bootstrap.min.css"> 
 
    <link rel="stylesheet" href="reset.css"> 
 
    <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\css\font-awesome.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> 
 
    <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\landing pages\landpage.css"> 
 
    <title>Landing Page</title> 
 
</head> 
 
<body> 
 
    <div class="main"> 
 
    <div class="overlay"> 
 
     <header> 
 
     <div class="header"> 
 
      <p class="logo">Road trip</p> 
 
      <i class="fa fa-bars icon" aria-hidden="true"></i> 
 
     </div> 
 
     </header> 
 
     <div class="main-content"> 
 
     <h1 id="main-h1">This is Road Trip</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="page2"> 
 
    <div class="overlay"> 
 
     <div class="page2-content"> 
 
     <h1 >This is Road Trip</h1> 
 
     <h2>21.12.2112</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p> 
 
     <div class="btn"> 
 
      <a href="#">Learn more . . .</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="page3"> 
 
    <div class="overlay"> 
 
     <div class="page3-content"> 
 
     <h1 >This is Road Trip</h1> 
 
     <h2>21.12.2112</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p> 
 
     <div class="btn"> 
 
      <a href="#">Learn more . . .</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 

 

 

 

 

 
    </body> 
 
</html>

+2

如果您希望元素互相跟随 - 在页面的自然流动 - 那么就不要使用绝对定位。它们会自然地出现在彼此之后。 –

+0

的作品,但在这种情况下,我不能使用顶部或左侧居中我的主要内容。第2页上的内容将其从fisrt页面的顶部开始。 –

+0

如果你正在谈论'.main-content',那么你仍然可以绝对定位。这是一个块,你*不需要在自然流动。 –

回答

0

.main { 
 
    color: white; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url("landbackground2.jpeg"); 
 
    background-size: cover; 
 
    background-position: center bottom; 
 
} 
 

 
.overlay { 
 
    position:relative; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.main-content { 
 
    padding: 50px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate3d(-50%, -50%, 0); 
 
} 
 

 
.icon { 
 
    padding: 7px; 
 
    display: inline-block; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    border-radius: 50%; 
 
    font-size: 20px; 
 
    float: right; 
 
} 
 

 
.logo { 
 
    font-size: 20px; 
 
    display: inline-block; 
 
} 
 

 
.header { 
 
    z-index: 100; 
 
    width: 100%; 
 
    position: fixed; 
 
    padding: 20px 20px; 
 
} 
 

 

 
#main-h1 { 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    font-family: 'Indie Flower', cursive; 
 
} 
 

 

 

 
/* NOTE: PAGE 2 */ 
 

 

 
.page2 { 
 
    position:relative; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url("page2.jpg"); 
 
    background-size: cover; 
 
    background-position: center; 
 

 
} 
 

 
.page2-content { 
 
    position:absolute; 
 
    padding: 20px 30px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 

 
} 
 
.page3-content { 
 
    position:absolute; 
 
    padding: 20px 30px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 

 
} 
 

 
a { 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    border: 1px solid white; 
 
    border-radius: 5px; 
 
    color: white; 
 
    transition: 0.5s; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    box-shadow: white 0px 0px 20px; 
 
} 
 

 
.bg-attach { 
 
    background-attachment: fixed; 
 
} 
 

 
.page3 { 
 
position:relative; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url(".jpg"); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 

 

 
.fuck { 
 
    position: relative; 
 
    display: block; 
 
    height: 100vh; 
 
    background: pink; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\bootstrap-4.0.0-beta.2\dist\css\bootstrap.min.css"> 
 
    <link rel="stylesheet" href="reset.css"> 
 
    <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\css\font-awesome.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> 
 
    <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\landing pages\landpage.css"> 
 
    <title>Landing Page</title> 
 
</head> 
 
<body> 
 
    <div class="main"> 
 
    <div class="overlay"> 
 
     <header> 
 
     <div class="header"> 
 
      <p class="logo">Road trip</p> 
 
      <i class="fa fa-bars icon" aria-hidden="true"></i> 
 
     </div> 
 
     </header> 
 
     <div class="main-content"> 
 
     <h1 id="main-h1">This is Road Trip</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="page2"> 
 
    <div class="overlay"> 
 
     <div class="page2-content"> 
 
     <h1 >This is Road Trip</h1> 
 
     <h2>21.12.2112</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p> 
 
     <div class="btn"> 
 
      <a href="#">Learn more . . .</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="page3"> 
 
    <div class="overlay"> 
 
     <div class="page3-content"> 
 
     <h1 >This is Road Trip</h1> 
 
     <h2>21.12.2112</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p> 
 
     <div class="btn"> 
 
      <a href="#">Learn more . . .</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 

 

 

 

 

 
    </body> 
 
</html>

+0

这就是它的人。非常感谢。有效。 –

+0

@Rufat没问题:)确保接受它。欢呼 – 2017-12-18 10:38:56

+0

@RufatAliyev你什么意思跳起来了?如果您指的是摘录,请不要介意只在整页上查看它并尝试调整大小。而且它跳跃了,因为你在第2页和第3页有一个很大的填充符。 – 2017-12-18 10:41:32