看不到第三个div。溢出另一个

  • Z时代
  • 2024-01-10
  • 分类：问答

嘿家伙我不知道我的代码有什么问题。但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>

回答：

.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>

以上是 看不到第三个div。溢出另一个 的全部内容， 来源链接： utcz.com/qa/262373.html

回到顶部