2-10 作业,body下方为何出现大片空白?如何去除?
CSS布局
*{margin: 0;padding: 0; border: 0;}
body{margin: 0;padding: 0; border: 0;}
a{text-decoration: none;}
a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decoration:none;}
a:hover{color:white;text-decoration:none;}
a:active{color:white;text-decoration:none;}
.header{width: 1275px;
height:64px;
background-color: #07cbc9;
margin: 0 auto;}
.logo{padding-top: 6px;
padding-bottom: 6px;
padding-left: 60px;
float: left;
}
.menu{width: 450px;
height:60px;
float: right;
text-align: center;
padding-right: 40px;
}
.menu li{display: inline;
list-style: none;
font-size:12px;
color: #ffffff;
line-height:60px;
padding: 25px 8px;
}
.menu li:hover{background: #000;
}
.banner{ width: 1275;
position: relative;
height: auto;}
.banner img{display: block;
width: 1275px;
height: 600px;
margin: 0 auto;
}
.layer{width: 1275px;
height: 600px;
margin: 0 auto;
background: black;
opacity: 0.5;
z-index: 1;
position: relative;
top: -600px;
left:0px;}
.form {width: 380px;
height: auto;
margin: 0 auto;
position: absolute;
top: 200px;
left: 38%;
color: #ddd;
z-index: 2;
}
.form input,textarea{display: block;
width: 350px;
height: auto;
z-index: 2;
padding: 10px;
margin-top: 15px;
border: 1px solid gray;
background: transparent;
color: #ddd;
}
body{overflow: hidde}
.form textarea{height: 50px;
}
.form .sb{width: 110px;
text-align: center;
margin-left: 120px;
}
.form input:hover{border: solid 1px #07cbc9;}
.form textarea:hover{border: solid 1px #07cbc9;}
.form .sb:hover{background:#07cbc9; cursor: pointer; }
.about{width: 700px;
height: 100%
margin:0 auto;}
ABOUT
-
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.Lorem Ipsum is simply dummy
text ever since the 1500s. |
免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。
版权声明:作者保留权利,不代表天盟立场。
|
|
|
|
你的 .layer 是相对定位 是针对页面自身位置进行定位 你把.layer 下的
top:-600px;去掉,问题就能看出来了, relative 定位不会使元素脱离文档流 那个白色是.layer在文档流的位置 |
|
|
|
|