2-10 作业，body下方为何出现大片空白？如何去除？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS布局</title>
    <style type="text/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;}

    </style>
</head>
<body>
<div class="header">
    <div class="logo"><img src="images/logo.png"></div>
    <div>
        <ul class="menu">
            <li><a href="#">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>
    </div>
</div>
<div class="banner"><img src="images/banner3.jpg"></div>

<div class="layer"></div>

<div class="form">
   <input type="text" name="name" placeholder="your Name"/>
   <input type="tel" name="phone" placeholder="your Phone"/>
   <input type="email" name="email" placeholder="your Email"/>
   <textarea placeholder="Write Your Comment Here"></textarea>
   <input type="sumbit" value="SEND MESSAGE" class="sb"/>
</div>

<div class="about">
<div class="top-about">ABOUT</div>
<div class="line">-</div>
<div class="bottom-about">Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry.Lorem Ipsum is simply dummy<br>text ever since the 1500s.</div>

<div class="gallery"></div>
</div>
<div class="footer"></div>

</body>
</html>

alex_dong

浏览 1442回答 1

1回答

香香的串串

你的 .layer 是相对定位是针对页面自身位置进行定位你把.layer 下的 top: -600px;去掉，问题就能看出来了， relative 定位不会使元素脱离文档流那个白色是.layer在文档流的位置

0 0

随时随地看视频慕课网APP