老师，我写到一半发现，为什么我的窗口缩放，所有元素的位置都变化了，怎么解？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Career Builder</title>
<style type="text/css">
*{padding:0;margin:0;font-family: "Microsoft YaHei UI";}
.header{
width:100%;
height:100px;
background: #07cbc9;
}
.logo{
float: left;
margin-top: 20px;
padding-left: 80px;
}
.nav{
float: right;
}
.nav li{
float:left;
margin-right: 50px;
list-style:none;
color: white;
font-weight: bold;
font-size: 18px;
height:100px;
width: 80px;
line-height: 100px;
}
.banner-pic img{
width: 100%;
height: 700px;
}
.top-layer{
width:100%;
height:700px;
position:absolute;
top: 100px;
}
form{
width: 500px;
height:320px;
position: relative;
top:50%;
margin-top:-160px;
left:50%;
margin-left:-250px;
}
input{
border: 1px solid #fff;
width: 450px;
height:35px;
margin-top:20px;
background: none;
}
.submit{
width:200px;
color:#fff;
margin-left:125px;
}
.comment{
height:80px;
}
input::-webkit-input-placeholder{
color:#fff;
}
input::-moz-placeholder{
color:#fff;
}
input:-moz-placeholder{
color:#fff;
}
input:-ms-input-placeholder{
color:#fff;
}
.about{
width:100%;
}
.about-1{
text-align: center;
}
.about-1 h1{
font-weight: bold;
margin-top:30px;
}
.about-1 p{
color:gray;
line-height: 30px;
}
.bluebar{
width:25px;
height: 2px;
background:#07cbc9;
margin:10px auto;
}
.about-2{
width:100%;
height: 450px;
margin-top:40px;
position: relative;
}
.about-2-1,.about-2-2,.about-2-3{
float: left;
}
.about-2-1{
width:400px;
height:400px;
position: absolute;
left: 400px;
z-index: 2;
}
.about-2-1 h1{
text-align: center;
width: 250px;
}
.about-2-1 .word{
border: 1px solid grey;
width: 400px;
height: 250px;
background: #fff;
opacity: 0.3;
}
.word-toplayer{
width: 320px;
height:320px;
background: none;
position: relative;
top:-200px;
left:20px;
line-height: 20px;
}
.button{
background:black;
width:90px;
height: 40px;
color:#fff;
padding: 10px;
box-sizing:border-box;
margin-top:20px;
}
.about-2-2 img{
width:600px;
height: 450px;
}
.about-2-2{
position: absolute;
left: 50%;
margin-left: -300px;
}
.about-2-3{
position: absolute;
left:1280px;
}
.about-2-3-1{
width:200px;
height: 150px;
border: 2px solid #07cbc9;
box-sizing: border-box;
padding: 20px;
}
.about-2-3-1 h1{
text-align: center;
}
.about-2-3-1 hr{
width: 40px;
height: 1px;
background:#07cbc9;
margin:20px auto;
}
.about-2-3-1 p{
text-align: center;
font-size: 20px;
}
.about-2-3-2{
width:200px;
height: 150px;
border: 2px solid #07cbc9;
box-sizing: border-box;
padding: 20px;
margin-top: 30px;
}
.about-2-3-2 h1{
text-align: center;
}
.about-2-3-2 hr{
width: 40px;
height: 1px;
background:#07cbc9;
margin:20px auto;
}
.about-2-3-2 p{
text-align: center;
font-size: 20px;
}
.about-3{
width: 100%;
}
.about-3-top{
width: 100%;
}
.about-3-top-1,.about-3-top-2{
float: left;
}
.about-3-top-1 {
width: 25%;
}
.about-3-top-1 img{
width:100%;
height: 400px;
}
.about-3-top-2{
width:25%;
height:400px;
background: #07cbc9;
position: relative;
z-index: 3;
color:#fff;
}
.triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 40px solid #07cbc9;
border-bottom: 20px solid transparent;
position: absolute;
left: -40px;
top:180px;
}
.w-1{
font-size: 26px;
margin: 20px;
}
.w-2{
font-size: 18px;
margin-left: 20px;
line-height: 30px;
}
.w-3{
font-size:15px;
margin: 20px;
line-height: 30px;
}
.button-2{
background:black;
width:90px;
height:40px;
color:#fff;
padding: 10px;
box-sizing:border-box;
position: absolute;
left:50%;
margin-left: -45px;
top:75%;
}
</style>
}
}
}
}
}
}
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.png"/>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner-pic">
<img src="images/banner3.jpg"/>
</div>
<div class="top-layer">
<form action="#" method="post">
<div>
<input type="text" name="user" placeholder=" your Name"/>
</div>
<div>
<input type="text" name="phonenumber" placeholder=" your phone"/>
</div>
<div>
<input type="text" name="email" placeholder=" your Email"/>
</div>
<div>
<input type="text" name="email" placeholder=" Write Your Comment Here" class="comment" />
</div>
<div>
<input type="submit" name="submit" value="SEND MESSAGE" class="submit" />
</div>
</form>
</div>
</div>
<div class="about">
<div class="about-1">
<h1>ABOUT</h1>
<div class="bluebar"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting <br/>industry.Lorem Ipsum has been the industry's standard dummy<br/> text ever since the 1500s.</p>
</div>
<div class="about-2">
<div class="about-2-1">
<h1>A WORD ABOUT US</h1>
<div class="word"></div>
<div class="word-toplayer">
Praesent dignissim viverra est,sed<br>bibendum ligula congue non.sed ac nis<br>et felis gravida commodo?suspendisse<br>eget ullamcorper ipsum.suspendisse<br>diam amet
<div class="button">EXPLORE</div>
</div>
</div>
<div class="about-2-2">
<img src="images/bb3.jpg"/>
</div>
<div class="about-2-3">
<div class="about-2-3-1">
<h1>70000</h1>
<hr>
<p>Students</p>
</div>
<div class="about-2-3-2">
<h1>600</h1>
<hr>
<p>Faculty</p>
</div>
</div>
</div>
<div class="clear"></div>
<div class="about-3">
<div about-3-top>
<div class="about-3-top-1">
<img src="images/b1.jpg">
</div>
<div class="about-3-top-2">
<p class="w-1">Library</p>
<p class="w-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="w-3">Lorem Ipsum has been the industry'standard dummy text ever since the 1500s,when an unknow printer took agalley of type and scrambled it to make a type specimen book.</p>
<div class="triangle"></div>
<div class="button-2">EXPLORE</div>
</div>
<div></div>
<div></div>
</div>
<div about-3-bottom></div>
</div>
</div>
<div>
</div>
<div class="footer"></div>
</body>
</html>0
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星