着陆页和创建者部分相互重叠。当我尝试添加创建者部分时,它只是搞砸了,这是可直接在此处检查的codepen URL。 https://codepen.io/anon/pen/BeMyRx
我尝试制作position:absolute;
和top:1500px;
,但什么也没发生
*{
margin: 0;
padding: 0;
}
body,html{
font-family: sans-serif;
width: 100%;
height:100%;
flex-wrap:wrap;
position: center;
background-image:url(https://cdn.discordapp.com/attachments/508013798544769034/583722034157060096/Untitled-1.png);
background-repeat: no-repeat;
background-size: cover;
}
.section-top{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.content{
position: absolute;
top:50%;
left:50%;
transform: translate(-50% , -50%);
text-align: center;
}
.content h1{
color:#c0392b;
text-transform: uppercase;
}
.content h3{
color:white;
font-size:15px;
font-family: Arial;
}
.content a{
background:#e74c3c;
padding: 10px 24px;
color: white;
text-decoration: none;
font-size:18px;
border-radius:20px;
text-transform: uppercase;
}
.testimonial-section{
background: #3498db;
padding: 40px 0;
}
.inner-width{
max-width: 1200px;
margin: auto;
padding: 0 20px;
}
.testimonial-section h1{
text-align: center;
color: #333;
font-size: 24px;
}
.border{
width: 100px;
height: 3px;
background: #333;
margin: 40px auto;
}
.testimonial{
background: #f1f1f1;
padding: 40px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.test-info{
display: flex;
height: 60px;
align-items: center;
}
.test-pic{
width: 50px !important;
border-radius: 50%;
margin-right: 15px;
}
.test-name{
font-size: 12px;
color: #333;
}
.test-name span{
display: block;
font-size: 14px;
font-weight: 700;
color: #3498db;
}
.testimonial p{
font-size: 12px;
line-height: 22px;
margin-top: 20px;
}
预计登陆页面应位于网站顶部,然后创建者部分应位于网站下方。
答案 0 :(得分:-1)
在HTML代码中,您在class属性中写了“ secton-top”而不是“ section-top”。