bananer挡住了about和gallery，试过清除浮动和about设margin top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
font-family:"Microsoft YaHei UI";
}
.header,.footer{background-color: #07cbc9;
width: 100%;height:80px;
line-height: 80px;color: #ffffff;
}
.footer{text-align: center;position: absolute;
bottom: 0;}
.logo{float: left;padding-top: 15px;}
.nav{float:right;padding-right: 100px;}
.nav ul li{ float: left;list-style: none;
padding-right: 20px;
}
.banner{width: 100%; overflow: hidden;
height: 635px;}
.banner .tu{width: 100%;height:635px;position: absolute;
top: 80px;
}
.banner img{width: 100%;height: 635px;}
.banner .toplayer{background-color: #000;width: 100%;
height:635px;
opacity:0.5;position: absolute;
top: 80px;
}
.banner .form{text-align: center;
height: 400px;width:800px;
position: absolute;
z-index: 2;top:50%;
left:50%;margin-top: -300px;
margin-left: -400px;
}
.banner .form .border{
background-color: transparent;
border: solid 1px white;height: 30px;
padding: 10px;
}
.banner .form .textarea{ background-color: transparent;
border: solid 1px white;color:#808080;
padding: 10px;padding: 10px;}
button{color:#808080;}
.clear{clear: both;}
.about{text-align: center;}
.about .tou{background-color: blue;
width:700px;margin-top: 715px;
}
</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>FACULTY</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="banner">
<div class="tu">
<img src="images/banner3.jpg">
</div>
<div class="toplayer">
</div>
<div class="form">
<form>
<input type="text" placeholder="your name" name="name" class="border" size="80px">
<br/>
<br/>
<br/>
<input type="text" placeholder="your phone" name="phone" class="border" size="80px">
<br/><br/><br/>
<input type="text" placeholder="your Email" name="Email" class="border" size="80px">
<br/><br/><br/>
<textarea class="textarea" cols="80px" rows="6" placeholder="Write Your Comment Here" >Write Your Comment Here
</textarea>
<br/><br/><br/>
<button name="send" type="submit" value="message" class="border">SEND MESSAGEE</button>
</form>
</div>
<div class="clear"></div>
<div class="about">
<div class="tou">
ABOUT
</div>
<div class="a1"></div>
asdasdawdasdsad
<div class="a2"></div>
asdadsadsad
</div>
<div class="gallery">
asdasdads
</div>
<div class="footer">
©2016 imooc.com 京ICP备13046642
</div>
</body>
</html>
正在回答 回答被采纳积分+1
对了一下你的html结构，发现banner区最外层的div少了一个div的结束标签，猜测你应该是要加在这里，你加上再试试看：
要细心一点哦。
除此之外，老师看了一下你上面做好的header部分和banner部分，还有一些地方有问题，可能你还没有完全写完，我先在这里先跟你说一下，你做一下参考：
1、header部分最左边的logo图片不居中，有点下挤的感觉，看到你写了一个padding-top: 15px;，把这个填充去掉就可以了。
2、底部需要设置固定定位，也就是position：fixed不是position：absolute。
3、banner区域的表单设置的宽高太大了，适当的减小一些，另外，表单的定位也不对，想要绝对定位，就要有相对点，这里他的相对点就是他的父元素，也就是banner的最外层标签，因此，需要给最外层的banner所在的div设置position：relative，如果不设置，默认的就是相对浏览器定位，设置之后，banner中内容就不需要再给top数据了，或者top改为0，定位的数据算的也有问题，是top：50%之后，要回本身高度的一半：
4、你下面的显示不出来，是因为使用了定位，定位之后就会有遮盖的现象，解决这个问题，可以用填充。
上面是把你代码中的主要问题说了一下，细节性的没有说，但是把你的代码给改了一下，详细的问题，还需要你详细的对照一下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei UI";
}
.header,
.footer {
background-color: #07cbc9;
width: 100%;
height: 80px;
line-height: 80px;
color: #ffffff;
}
.footer {
text-align: center;
position: fixed;
bottom: 0;
}
.logo {
float: left;
/*padding-top:15px;*/
}
.nav {
float: right;
padding-right: 100px;
}
.nav ul li {
float: left;
list-style: none;
padding-right: 20px;
}
.banner {
width: 100%;
/*overflow:hidden;*/
height: 600px;
position: relative;
font-size: 12px;
}
.banner .tu {
width: 100%;
height: 600px;
position: absolute;
/*top:80px;*/
}
.banner img {
width: 100%;
height: 600px;
}
.banner .toplayer {
background-color: #000;
width: 100%;
height: 600px;
opacity: 0.5;
position: absolute;
/*top:80px;*/
}
.banner .form {
text-align: center;
height: 300px;
width: 500px;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
.banner .form .border {
background-color: transparent;
border: solid 1px white;
height: 25px;
}
.banner .form .textarea {
background-color: transparent;
border: solid 1px white;
color: #808080;
}
.button {
background-color: transparent;
border: solid 1px white;
color: #808080;
color: #fff;
width: 150px;
height: 40px;
text-align: center;
}
.clear {
clear: both;
}
.about {
text-align: center;
}
.about .tou {
background-color: blue;
width: 700px;
/*margin-top: 715px;*/
}
.gallery{
color:black;
font-size: 30px;
}
</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>FACULTY</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="banner">
<div class="tu">
<img src="images/banner3.jpg">
</div>
<div class="toplayer">
</div>
<div class="form">
<form>
<input type="text" placeholder="your name" name="name" class="border" size="60px">
<br />
<br />
<input type="text" placeholder="your phone" name="phone" class="border" size="60px">
<br /><br />
<input type="text" placeholder="your Email" name="Email" class="border" size="60px">
<br /><br />
<textarea class="textarea" cols="60px" rows="6" placeholder="Write Your Comment Here">Write Your Comment Here
</textarea>
<br /><br />
<button name="send" type="submit" value="message" class="button">SEND MESSAGEE</button>
</form>
</div>
</div>
<!-- <div class="clear"></div> -->
<div class="about">
<div class="tou">
ABOUT
</div>
<div class="a1"></div>
asdasdawdasdsad
<div class="a2"></div>
asdadsadsad
</div>
<div class="gallery">
asdasdads
</div> -->
<div class="footer">
©2016 imooc.com 京ICP备13046642
</div>
</body>
</html>如果帮助到了你，欢迎采纳！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星