老师帮忙检查下，怎么下移这么多哦？
来源：2-10 作业题
怒焰狂暴
2020-02-10 17:00:25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="task.css"/>
<style>
*{
padding:0;
margin:0;
font-family: "Microsoft YaHei UI";
list-style: none;
text-decoration: none;
}
/* 顶部 */
header{
position:fixed;
width:100%;
height:80px;
background:#07cbc9;
margin:0 auto;
overflow: hidden;
z-index: 999;
}
header .logo{
float:left;
position:relative;
top:16px;
left:100px;
cursor:pointer;
}
header nav{
float:right;
margin-right:100px;
}
header nav ul li{
display:inline-block;
line-height: 80px;
font-size:20px;
font-weight:bold;
padding:0 10px 0 10px;
}
header nav ul li a{
color:#fff;
}
header nav ul li a:hover{
color:#007799;
}
/* banner区 */
section{
position:relative;
top:80px;
}
.banner{
width:100%;
height:auto;
text-align:center;
position:relative;
}
.banner img{
width:100%;
height:800px;
}
.banner .opacity_{
/* width:1584px; */
width:100%;
height:800px;
background:#000;
opacity:0.5;
position:absolute;
top:0;
left:0;
}
.con{
position:absolute;
top:50%;
left:50%;
margin-top:-174.6px;
margin-left:-254.5px;
}
.banner .con form .test1{
width:505px;
height:39px;
border:2px solid #808080;
background:transparent;
}
.banner .con form .textarea{
width:505px;
height:115px;
border:2px solid #808080;
background:transparent;
}
.banner .con form .button{
width:123px;
height:43px;
border:2px solid gray;
color:#808080;
background:transparent;
}
</style>
</head>
<body>
<!-- 顶部 -->
<header>
<div class="logo">
<img src="images/logo.png" alt=""/>
</div>
<nav>
<ul>
<li><a>HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<section>
<!-- banner区 -->
<div class="banner">
<div class="img">
<img src="images/banner3.jpg"/>
</div>
<div class="opacity_"></div>
<div class="con">
<form>
<input class="test1" type="test" placeholder=" your name"/><br/><br/>
<input class="test1" type="test" placeholder=" your phone"/><br/><br/>
<input class="test1" type="test" placeholder=" your email"/><br/><br/>
<textarea class="textarea" placeholder=" welcome to the..."></textarea><br/><br/>
<input class="button" type="button" value="SEND MESSAGE"/>
</form>
</div>
</div>
</section>
<footer>111111111111111</footer>
3回答
-
好帮手慕慕子
2020-02-10
同学你好 ，已经提交作业了，请耐心等待哦，批作业的老师，会针对同学的问题以及作业中存在的其他问题，给出详细的修改建议，并整理成文档发送给同学。祝学习愉快~
0 -
怒焰狂暴
提问者
2020-02-10
作业已经发给老师了，就是footer下面的内容整体偏移了很多，不会紧接着上行代码。代码写完自己检查不出来哪有问题了，只有麻烦老师啦！
0 -
好帮手慕糖
2020-02-10
同学你好，是哪个元素下移了特别多？建议：可以详细的描述下，也可以截图说明哦，便于准确的定位与解决问题。
祝学习愉快~
0
相似问题