老师我设置了固定位置后就出现这个问题了。

来源：2-10 作业题

QQ似水流年

2019-08-13 09:28:26

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>熊永昌的第二次作业</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--头部-->
<div class="header">
  <div class="loge"><img src="images/logo.png" alt="无法显示图片"></div>
  <div class="nav">
    <ul>
      <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>
<!--banner部分-->
<div class="main">
  <div class="pic"> <img src="images/banner3.jpg" alt="无法显示图片"> </div>
  <div class="topLayer"> </div>
  <!--遮罩层-->
  <div class="pad"><!--注册列表-->
    <div class="login">
      <ul>
        <li>
          <input type="text" placeholder="Your Name" >
        </li>
        <li>
          <input type="text" placeholder="Your Phone" >
        </li>
        <li>
          <input type="text" placeholder="Your Emily" >
        </li>
        <li>
          <textarea placeholder="Write Your Comment Here" ></textarea>
        </li>
        <li>
          <button>SEND MESS</button><!--提交按钮-->
        </li>
      </ul>
    </div>
  </div>
</div>
<!--主体部分1-->
<div class="about">
  <div class="about-header"> ABOUT </div>
  <!--主体部分1--头部-->
  <div class="hr"></div>
  <div class="about-a">Lorem Ipsum is simply text of the printing and typesetting<br>
    industry.lorem Ipsum has been the industry's standard dummy text<br>
    tever since the 1500s.</div>
  <div class="about-wrap"><!--主体部分1--左侧内容-->
    <div class="about-b">A WORD<br>
      ABOUT US</div>
    <div class="content">praexent dignissim viverra est, sed<br>
      bibendum ligula congue non.sedac nisl<br>
      et felis gravida commodo?Suspendisse<br>
      eget ullamcorper ipsum.Suspendisse<br>
      diam amet.
      <button class="button-a">EXPLORE</button>
    </div>
    <div class="about-phone"><img src="images/bb3.jpg" alt="无法显示图片"></div>
    <!--主体部分1--中间内容-->
    <div class="student-max"><!--主体部分1--右侧内容-->
      <div class="student-min">
        <p>7000</p>
        <div class="hd"></div>
        <p>Students</p>
      </div>
      <div class="student-faculty">
        <p>600</p>
        <div class="hd"></div>
        <p>Faculty</p>
      </div>
    </div>
  </div>
  <!--主体部分2-->
  <div class="from">
    <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <th><img src="images/b1.jpg" alt="无法显示图片"></th>
        <th class="text-css"> <p class="about-c">Library</p>
          <p class="about-e">Lorem Ipsum is simpiy dummy text of the<br>
            printing and typesetting industry</p>
          <p class="about-d">Lorem Ipsum has been the industry's standard dummy<br>
            text ever since the 1500s,when an unknown printer took<br>
            a gally of type and scrambed it to make a type<br>
            specimen book</p>
          <button>EXPLORE</button>
        </th>
        <th><img src="images/b2.jpg" alt="无法显示图片"></th>
        <th class="text-css"><p class="about-c">Computer&nbsp;Lab</p>
          <p class="about-e">Lorem Ipsum is simpiy dummy text of the<br>
            printing and typesetting industry</p>
          <p class="about-d">Lorem Ipsum has been the industry's standard dummy<br>
            text ever since the 1500s,when an unknown printer took<br>
            a gally of type and scrambed it to make a type<br>
            specimen book</p>
          <button>EXPLORE</button></th>
      </tr>
      <tr >
        <th class="text-css"><p class="about-c">Conference&nbsp;Hall</p>
          <p class="about-e">Lorem Ipsum is simpiy dummy text of the<br>
            printing and typesetting industry</p>
          <p class="about-d">Lorem Ipsum has been the industry's standard dummy<br>
            text ever since the 1500s,when an unknown printer took<br>
            a gally of type and scrambed it to make a type<br>
            specimen book</p>
          <button>EXPLORE</button></th>
        <th><img src="images/b3.jpg" alt="无法显示图片"></th>
        <th class="text-css"><p class="about-c">Play&nbsp;Ground</p>
          <p>Lorem Ipsum is simpiy dummy text of the<br>
            printing and typesetting industry</p>
          <p class="about-d">Lorem Ipsum has been the industry's standard dummy<br>
            text ever since the 1500s,when an unknown printer took<br>
            a gally of type and scrambed it to make a type<br>
            specimen book</p>
          <button>EXPLORE</button></th>
        <th><img src="images/b4.jpg" alt="无法显示图片"></th>
      </tr>
    </table>
  </div>
  <div class="about-header"> GALLERY </div>
  <div class="hr"></div>
  <div class="about-a">lorem Ipsum is simply dummy text of the printing and typesetting<br>
    industry.lorem Ipsum has been the industry's standard dummy text<br>
    tever since the 1500s.</div>
  <!--主体部分3-->
  <div class="picAndDes">
    <div class="icon2"> <img src="images/03-01.jpg" alt="">
      <div class="des1">SCICNCC&nbsp;LAD</div>
    </div>
    <div class="icon2 icon2-s"> <img src="images/03-02.jpg" alt="">
      <div class="des1">INDOOR&nbsp;STADIUM</div>
    </div>
    <div class="icon2"> <img src="images/03-03.jpg" alt="">
      <div class="des1">TRANSPORTATION</div>
    </div>
    <div class="icon2"> <img src="images/03-04.jpg" alt="">
      <div class="des1">KIDS&nbsp;ROOM</div>
    </div>
    <div class="icon2 icon2-s"> <img src="images/03-05.jpg" alt="">
      <div class="des1">MEDITATION&nbsp;CLASSES</div>
    </div>
    <div class="icon2"> <img src="images/03-06.jpg" alt="">
      <div class="des1">KIDS&nbsp;PLAY&nbsp;GRQUND</div>
    </div>
  </div>
</div>
<!-- 底部 -->
<div class="footer"> © 2016 imooc.com  京ICP备13046642号 </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*公共*/* {
margin: 0px;
padding: 0px;
font-family: "Microsoft YaHei UI";
}
/*头部*/
.header {
background-color: #07cbc9;
width: 100%;
height: 80px;
margin-top: 10px;
position:fixed;
}
.header .loge {
float: left;
margin-top: 16px;
margin-left: 80px;
}
.header .nav li {
height: 80px;
text-align: center;
line-height: 80px;
list-style: none;
float: right;
font-weight: bold;
margin-right: 60px;
}
.header .nav ul li a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
display: inline-block;
}
.header .nav ul li:hover {
color: #000000;
}
/*banner部分*/
.main {
width: 100%;
height: 500px;
}
.main .pic img {
width: 100%;
height: 500px;
position: relative;
}
/*遮罩层*/
.topLayer {
opacity: 0.2;
z-index: 1;
position: absolute;
top: 100px;
width: 100%;
height: 500px;
margin-top: -10px;
background: #000;
}
/*注册列表*/
.main .pad .login {
z-index: 2;
width: 509px;
height: 341px;
position: absolute;
top: 200px;
right: 50%;
margin-right: -254.5px;
text-align: center;
display: block;
}
.main .pad .login li {
list-style: none;
}
.login li input, .login li textarea, .login li button {
width: 505px;
height: 39px;
border: 2px solid grey;
margin-bottom: 10px;
background: transparent;
}
.login li textarea {
height: 115px;
}
.login li button {
width: 123px;
height: 39px;
color: #fff;
}
/*主体*/
/*主体部分1*/
/*公共头部*/
.about-wrap {
width: 1000px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.about .about-a, .about .about-header {
text-align: center;
}
.about .about-a {
margin-top: 20px;
}
.hr {
margin-left: 49%;
width: 25px;
border-bottom: 2px solid #07cbc9;
padding-top: 20px;
}
.about .about-header {
font-weight: bold;
font-size: 40px;
}
/*主体部分1左侧内容*/
.content {
position: absolute;
top: 100px;
left: 70px;
background: rgba(255, 255, 255, 0.4);
line-height: 1.5em;
height: 246px;
width: 320px;
border: 1px solid #ABA6A6;
text-align: left;
padding-top: 20px;
padding-left: 30px;
margin-left: -70px;
}
.button-a {
color: #fff;
text-align: center;
margin-right: 140px;
width: 102px;
height: 45px;
background-color: #000000;
display: block;
margin-top: 15px;
border: 2px solid #000;
}
.button-a:hover {
background-color: transparent;
color: #000;
}
.about-wrap .about-b {
float: left;
width: 216px;
font-size: 20px;
font-weight: bold;
}
/*主体部分1中间部分*/
.about-phone {
float: left;
width: 568px;
text-align: center;
}
.about-phone img {
width: 568px;
}
/*主体部分1右侧内容*/
.student-max {
float: right;
width: 202px;
}
.student-min {
border: 1px solid #2EE7DE;
text-align: center;
width: 200px;
height: 100px;
padding-top: 40px;
}
.student-faculty {
border: 1px solid #2EE7DE;
text-align: center;
margin-top: 30px;
width: 200px;
height: 100px;
padding-top: 40px;
}
.hd {
margin-left: 43%;
width: 40px;
border-bottom: 1px solid #07cbc9;
padding-top: 15px;
margin-bottom: 10px;
}
/*主体部分2*/
.from {
width: 100%;
height: 600px;
font-family: "宋体";
}
.from th {
width: 25%
}
.from img {
width: 100%;
height: 300px;
display: block;
}
.text-css {
background-color: #07cbc9;
color: #ffffff;
text-align: left;
padding-left: 50px;
}
.text-css button {
background-color: #000000;
color: #ffffff;
height: 40px;
width: 100px;
border: none;
margin-top: 10px;
}
.text-css button:hover {
background: transparent;
border: 1px solid #000000;
}
.about-c {
font-size: 18px;
font-weight: bold;
}
.about-d {
font-size: 5px;
font-weight: lighter;
}
.about-e {
font-size: 10px;
}
/*主体部分三*/
.picAndDes {
width: 1000px;
margin: 0px auto;
overflow: hidden;
}
.icon2 {
width: 300px;
float: left;
margin-bottom: 20px;
}
.icon2 img {
width: 100%;
display: block;
}
.des1 {
background-color: #000000;
color: #ffffff;
height: 64px;
line-height: 64px;
padding-left: 20px;
}
.icon2.icon2-s {
margin: 0 50px;
}
/*底部*/
.footer {
width: 100%;
height: 80px;
background-color: #07cbc9;
color: #ffffff;
text-align: center;
line-height: 100px;
font-family: "微软雅黑";
font-size: 15px;
}