2-10作业，为什么正常显示，缩小或者放大网页文字，位置等就完全变形了？

来源：2-10 作业题

alex_dong

2018-04-28 11:02:39

截图是网页缩小后的样子，可见文字大小和位置完全变形了，附代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS布局</title>
    <style type="text/css">
*{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: 1275px;
         position: relative;
         height: auto;
         margin: 0 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: absolute;
       top: 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;

                 }

.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: 1000px;
       height: auto;
       position: relative;
       margin:0 auto;
       text-align: center;
   }

.top-about{font-size: 30px;
           width: 110px;
           height: auto;
           margin:0 auto;
           margin-top: 50px;
}

.line{font-size: 16px;
      color: #07cbc9;
      margin:0 auto;
}

.bottom-about{width: 400px;
              height: auto;
             font-size: 16px;
             color: gray;
             margin:0 auto;
             margin-bottom: 30px;
}

.line{width: 70px;
      height: 2px;
      border: 2px;
      background-color:#07cbc9;
      margin: 0 auto;
      overflow:hidden;
      margin-top: 20px;
      margin-bottom: 20px;}

.aboutimg{width: 1000px;
          height: auto;
          margin: 0 auto;
          position: relative;}

.aboutimg img{width: 455px;
              height: 305px;
              margin: 0 auto;
              position: relative;


}

.leftabout{width: 320px;
       height: 290px;
       margin-left: 80px;
       position: absolute;
       text-align: center;
       background-color: transparent;
       top: 180px;

}

.world{width: 120px;
       height: auto;
       margin-left:0px;
       font-size: 20px;
}

.rec{width: auto;
    height: auto;
    padding: 25px 15px 50px 10px;
    position: relative;

}

.layerwhite{width: 320px;
            height: 200px;
            border: 1px solid gray;
            background-color: #fff;
            position: absolute;
           top: 0px;
           left: 0px;
           opacity: 0.5;
           z-index: 1;

}

.worldsec{font-size: 14px;
         text-align: left;
         position: relative;
         z-index: 2;
         color: black;}

.explore{width: 90px;
        height: 40px;
        font-size: 16px;
        margin-left: 0px;
        margin-top: 20px;
        padding-left: 0px;
        background-color: black;
        text-align: center;
        color: white;
        cursor: pointer;
        position: absolute;
        z-index: 2
}

.seven{width: 220px;
       height: 130px;
       border: solid #07cbc9 1px;
       position: absolute;
       top: -50px;
       left: 680px;

        }

.six{width: 220px;
       height: 130px;
       border: solid #07cbc9 1px;
       position: absolute;
       top: 100px;
       left: 680px;
}

.st,.sh{font-size:25px;
        padding-top: 10px; }

.linetwo{width: 50px;
         height: 2px;
         border: 2px;
         background-color:#07cbc9;
         margin: 0 auto;
         overflow:hidden;
         margin-top: 5px;
         margin-bottom: 5px;}

.stu,.fac{font-size:18px;
          margin-top: -9px;}

.bg{width: 1275px;
    height: 560px;
    margin: 0 auto;
    top: 60px;
    position: relative;
    background-color: pinktest;}

.b1 img,.b2 img,.b3 img,.b4 img{width: 280px;
                                height: 280px;}

.gr1,.gr2,.gr3,.gr4{width: 280px;
                   height: 280px;
                   background:#07cbc9;
                   }

.b1 {width: 280px;
     height: 280px;
     position: absolute;
     left: 78px;
     top: 0px;}

.gr1{position: absolute;
     left: 358px;
     top: 0px;}

.b2 {position: absolute;
        left: 638px;
        top: 0px;}

.gr2{position: absolute;
     left: 918px;
     top: 0px;}

.gr3{position: absolute;
     left: 78px;
     top: 280px;}

.b3 {position: absolute;
        left: 358px;
        top: 280px;}

.gr4{position: absolute;
     left: 638px;
     top: 280px;}

.b4 {position: absolute;
     left: 918px;
     top: 280px;}

.lib,.cl,.ch,.pg{width: 260px;
     height: 200px;
     margin: 0 auto;
     margin-top: 10px;
}

p.lib1,.cl1,.ch1,.pg1{font-size: 22px;
          color: white;
          padding: 8px;}

p.lib2,.cl2,.ch2,.pg2{font-size: 18px;
          color: white;
          padding: 8px;}

p.lib3,.cl3,.ch3,.pg3{font-size: 6px;
          color: white;
          padding: 8px;}

.explore2{width: 80px;
        height: 35px;
        font-size: 12px;
        padding-left: 0px;
        border: solid 1px black;
        background-color: black;
        text-align: center;
        color: white;
        cursor: pointer;
        position: relative;
        top: 20px;
        left: 85px;
}

.explore2:hover{background-color: #07cbc9;}

.gallery{width: 1000px;
       height: 700px;
       position: relative;
       margin:0 auto;
       text-align: center;
       background-color: orangetest;
   }

.top-gallery{font-size: 30px;
           width: 110px;
           height: auto;
           margin:0 auto;
           margin-top: 80px;
}

.line2{font-size: 16px;
      color: #07cbc9;
      margin:0 auto;
}

.bottom-gallery{width: 400px;
              height: auto;
             font-size: 16px;
             color: gray;
             margin:0 auto;
             margin-bottom: 30px;
}

.line2{width: 70px;
      height: 2px;
      border: 2px;
      background-color:#07cbc9;
      margin: 0 auto;
      overflow:hidden;
      margin-top: 20px;
      margin-bottom: 20px;}

.below-gallary{width: 1000px;
               height: auto;
               margin: 0 auto;
               background-color: blue;
               position: relative;}

.sl{width: 333px;
    height: 252px;
    background-color: pinktest;
    position: absolute;
    top: 0px;
    left: 24px;
    }

.sl img{width: 288px;
        height: 192px;
        padding-top: 5px;

}

.is{width: 333px;
    height: 252px;
    background-color: pinktest;
    position: absolute;
    top: 0px;
    left: 333px;
    }

.is img{width: 288px;
        height: 192px;
        padding-top: 5px;
}

.tr{width: 333px;
    height: 252px;
    background-color: pinktest;
    position: absolute;
    top: 0px;
    left: 643px;
    }

.tr img{width: 288px;
        height: 192px;
        padding-top: 5px;
}

.kr{width: 333px;
    height: 252px;
    background-color: pinktest;
    position: absolute;
    top: 252px;
    left: 24px;
    }

.kr img{width: 288px;
        height: 192px;
        padding-top: 5px;
}

.mc{width: 333px;
    height: 252px;
    background-color: pinktest;
    position: absolute;
    top: 252px;
    left: 333px;
    }

.mc img{width: 288px;
        height: 192px;
        padding-top: 5px;
}

.kg{width: 333px;
    height: 252px;
    background-color: pinktest;
    position: absolute;
    top: 252px;
    left: 643px;
    }

.kg img{width: 288px;
        height: 192px;
        padding-top: 5px;
}

.blackbottom{width: 288px;
             height: 40px;
             background-color: black;
             position: absolute;
             position: absolute;
             top: 197px;
             left: 22px; }


.bbw{color: white;
    font-size: 14px;
    line-height: 40px;
    text-align: center;}

.footer{width: 1275px;
        height:64px;
        background-color: #07cbc9;
        margin: 0 auto;
        position: relative;
        top: 30px;
        line-height: 64px;
        text-align: center;
        color: white;}

.tri{   width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-right: 15px solid #07cbc9;
        border-bottom: 15px solid transparent;
        border-left: 15px solid transparent;
        position: absolute;
        right: 0px;
        top: 125px;
        z-index:1;
    }

    .tri2{ width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 15px solid #07cbc9;
        position: absolute;
        left: 0px;
        top: 125px;
        z-index:1;
    }

    </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 class="layer"></div>
</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 industry.Lorem Ipsum is simply dummy text ever since the 1500s.
    </div>
   <div class="aboutimg"><img src="images/bb3.jpg"></div>

<div class="leftabout">
     <div class="world">A WORD<br/>ABOUT US</div>

     <div class="rec">
        <div class="layerwhite"></div>
       <div class="worldsec">Praesent dignissim viverra est.sed bibendum ligula congue non.Sed ac niset felis gravida commodo? Suspendise eget ullamcorper ipsum. Suspendisse diam amet.<br/><input type="sumbit" value="EXPLORE" class="explore"/></div>
       <div class="seven"><p class="st">70000</p><br/><div class="linetwo"></div><br/><p class="stu">Students</p></div>
       <div class="six"><p class="sh">600</p><br/><div class="linetwo"></div><br/><p class="fac">Faculty</p></div>
    </div>
   </div>

</div>

<div class="bg">
    <div class="b1"><img src="images/b1.jpg"><div class="tri"></div></div>
    <div class="gr1">
        <div class="lib"><p class="lib1">Library</p><p class="lib2">Lorem ipsum is simply dummy text of the printing.</p><p class="lib3">Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</p><input type="sumbit" value="EXPLORE" class="explore2"/></div>
    </div>
    <div class="b2"><img src="images/b2.jpg"><div class="tri"></div></div>
    <div class="gr2">
        <div class="cl"><p class="cl1">Computer Lab</p><p class="cl2">Lorem ipsum is simply dummy text of the printing.</p><p class="cl3">Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</p><input type="sumbit" value="EXPLORE" class="explore2"/></div>
    </div>
    <div class="gr3">
        <div class="ch"><p class="ch1">Conference Hall</p><p class="ch2">Lorem ipsum is simply dummy text of the printing.</p><p class="ch3">Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</p><input type="sumbit" value="EXPLORE" class="explore2"/></div>
    </div>
    <div class="b3"><img src="images/b3.jpg"><div class="tri2"></div></div>

    <div class="gr4">
        <div class="pg"><p class="pg1">Play Ground</p><p class="pg2">Lorem ipsum is simply dummy text of the printing.</p><p class="pg3">Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</p><input type="sumbit" value="EXPLORE" class="explore2"/></div>
    </div>
    <div class="b4"><img src="images/b4.jpg"><div class="tri2"></div></div>
</div>

<div class="gallery">

    <div class="top-gallery">GALLERY</div>
    <div class="line2"></div>
    <div class="bottom-gallery">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text ever since the 1500s.
    </div>

    <div class="below-gallary">
        <div class="sl"><img src="images/03-01.jpg"><div class="blackbottom"><p class="bbw">SCIENCE LAB</p></div></div>
        <div class="is"><img src="images/03-02.jpg"><div class="blackbottom"><p class="bbw">INDOR STATIUM</p></div></div>
        <div class="tr"><img src="images/03-03.jpg"><div class="blackbottom"><p class="bbw">TRANSPORTATION</p></div></div>
        <div class="kr"><img src="images/03-04.jpg"><div class="blackbottom"><p class="bbw">KIDS ROOM</p></div></div>
        <div class="mc"><img src="images/03-05.jpg"><div class="blackbottom"><p class="bbw">MEDITATION CLASSES</p></div></div>
        <div class="kg"><img src="images/03-06.jpg"><div class="blackbottom"><p class="bbw">KIDS PLAY GROUND</p></div></div>
    </div>
</div>

<div class="footer"><p>©2016 imooc.com 京ICP备13046642号</p></div>

</body>
</html>