2-10项目作业疑问

2-10项目作业疑问

问题一：为什么网页底部我设置的宽度是100%，在浏览器最大化的时候没有问题，但是当缩小浏览器窗口，并且把下方的滑动栏拉到最右时，发现底部没有铺满100%，在右边还有空白区域。虽然可以用overflow-x:hidden隐藏，但是还是想要知道为什么。

http://img1.sycdn.imooc.com//climg/5b226ab000016eff18941001.jpg

问题二：我发现自己的网页在缩小浏览器窗口后，有些网页内容会被挤压错位，想知道是什么原因导致的，因为在看比如慕课的网页浏览器窗口内容缩小却依然不会影响网页内容的显示，想知道有什么方法可以解决？

http://img1.sycdn.imooc.com//climg/5b226b9e0001206219281004.jpg

http://img1.sycdn.imooc.com//climg/5b226b9f0001e60014631398.jpg

问题三：不知道在实际的开发中，网页所有布局的部分一般宽度都是自适应吗？因为考虑到问题二出现的原因不知道是不是因为相应的宽度设置的是固定值导致的。

相应的html代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Career Builder</title>
 <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 这是顶部 -->
 <div class="header">
  <div class="header-left">
   <img src="images/logo.png">
  </div>
  <div class="header-right">
   <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>
 <!-- 这是主体 -->
 <div class="main">
  <!-- 这是banner图 -->
  <div class="banner">
   <img src="images/banner3.jpg">
  </div>
  <div class="banner-top1">
   
  </div>
  <form action="" method="post" class="banner-top2">
  <!-- <div class="banner-top2"> -->
   <input type="text" placeholder="your Name">
   <input type="text" placeholder="your Phone">
   <input type="text" placeholder="your Email">
   <textarea name="comment" id="comment" placeholder="Write Your Comment Here" cols="50" rows="10"></textarea>
            <button><a href="#">SEND MESSAGE</a></button>
  <!-- </div> -->
  </form>
  <!-- 这是about区 -->
  <div class="about">
   <div class="about-container">
    <div class="about-1">
     <h1>ABOUT</h1>
     <!-- <hr/> -->
     <div class="hr-container">
      <div id="hr"></div>
     </div>
     <p>Lerem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>
    <div class="about-2 clearfix">
     <div class="about-2-box1">
      <p class="title">A WORD ABOUT US</p>
      <div class="word">
       <p>Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo? Susen
       disse eget ullamc orper. Suspen disse diam amet.</p>
       <a href="#"><button id="explore">EXPLORE</button></a>
         </div>
     </div>
     <div class="about-2-box2">
      <img src="images/bb3.jpg">
     </div>
     <div class="about-2-box3">
      <div class="data">
       <h3>70000</h3>
       <!-- <hr/> -->
       <div id="hr"></div>
       <p>Students</p>
      </div>
      <div class="data">
       <h3>600</h3>
       <!-- <hr/> -->
       <div id="hr"></div>
       <p>Faculty</p>
      </div>
     </div>
    </div>
   </div>
   <div class="about-container2 clearfix">
    <div class="picture">
     <img src="images/b1.jpg">
    </div>
    <div id="triangle1"></div>
    <div class="word">
     <p class="title">Library</p>
     <p class="p1">Ipsum is simply dummy text of the printing and typesetting industry.</p>
     <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.when an unknown printer took a galley of type and scrambled to make a type specimen book.</p>
     <a href="#"><button id="explore">EXPLORE</button></a>
    </div>    <div class="picture">
     <img src="images/b2.jpg">
    </div>
    <div id="triangle1"></div>
    <div class="word">
     <p class="title">Library</p>
     <p class="p1">Ipsum is simply dummy text of the printing and typesetting industry.</p>
     <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.when an unknown printer took a galley of type and scrambled to make a type specimen book.</p>
     <a href="#"><button id="explore">EXPLORE</button></a>
    </div> 
        <div class="word">
     <p class="title">Library</p>
     <p class="p1">Ipsum is simply dummy text of the printing and typesetting industry.</p>
     <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.when an unknown printer took a galley of type and scrambled to make a type specimen book.</p>
     <a href="#"><button id="explore">EXPLORE</button></a>
    </div>
    <div id="triangle2"></div>
    <div class="picture">
     <img src="images/b3.jpg">
    </div>
    <div class="word">
     <p class="title">Library</p>
     <p class="p1">Ipsum is simply dummy text of the printing and typesetting industry.</p>
     <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.when an unknown printer took a galley of type and scrambled to make a type specimen book.</p>
     <a href="#"><button id="explore">EXPLORE</button></a>
    </div>
    <div id="triangle2"></div>
    <div class="picture">
     <img src="images/b4.jpg">
    </div>
   </div> 
  </div>
  <!-- 这是GALLERY区 -->
  <div class="gallery">
   <div class="gallery-contanier">
    <div class="gallery-1">
     <h1>GALLERY</h1>
     <!-- <hr/> -->
     <div class="hr-container">
      <div id="hr"></div>
     </div>
     <p>Lerem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>
    <div class="gallery-2 clearfix">
     <dl>
      <dt><img src="images/03-01.jpg" alt=""></dt>
      <dd>SCIENCE LAG</dd>
     </dl>
     <dl>
      <dt><img src="images/03-02.jpg" alt=""></dt>
      <dd>INDOOR STADIUM</dd>
     </dl>
     <dl>
      <dt><img src="images/03-03.jpg" alt=""></dt>
      <dd>TRANSPORTATION</dd>
                    </dl>
                    <dl>
      <dt><img src="images/03-04.jpg" alt=""></dt>
      <dd>KIDS ROOM</dd>
     </dl>
     <dl>
      <dt><img src="images/03-05.jpg" alt=""></dt>
      <dd>MEDITATION CLASSES</dd>
     </dl>
     <dl>
      <dt><img src="images/03-06.jpg" alt=""></dt>
      <dd>KIDS PLAY GROUND</dd>
     </dl>
    </div>
   </div>
  </div>
 </div>
 <!-- 这是页脚区 -->
 <div class="footer">
  &copy;2016 imooc.com 京ICP备13046642号
 </div>
</body>
</html>


css代码如下：

/*初始化重置样式*/
*{
 margin: 0;
 padding: 0;
 font-family: "Microsoft YaHei UI";
}
body{
 width:100%;
 min-width: 80%;
 /*min-height: 900px;*/
 text-align: center;
 margin: 0 auto;
 background: #fff;
 /*overflow-x: hidden;*/
}
.clearfix:after{
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}
.clearfix{
 zoom:1;
}
/*链接样式*/
a{
 text-decoration: none;
 color: #fff;
}
.header .header-right ul li:link{color: #fff;}
.header .header-right ul li:visited{color: #fff;}
.header .header-right ul li:hover{background: #000;}
.header .header-right ul li:active{color: #fff;}
.main .banner-top2 input:hover,.main .banner-top2 textarea:hover{
 border: 1px solid #07cbc9;
}
.main .banner-top2 button:hover{
 background: #07cbc9;
 border: none;
}
/*#explore:hover{
 background: #fff;
 color: #000;
 border: 1px solid #000;
}*/

.main .about .about-container .about-2 .about-2-box1 .word button:hover{
 background-color: rgba(255,255,255,0);
 color: #000;
 border: 1px solid #000;
}
.main .about .about-container2 .word button:hover{
 background-color: rgba(255,255,255,0);
 color: #fff;
 border: 1px solid #000;
}

/*顶部*/
.header{
 width:100%;
 background: #07cbc9;
 position: fixed;
 top: 0;
 z-index: 10;
 overflow: hidden;
 zoom:1;
}
.header .header-left{
 width: 260px;
 height: 48px;
 line-height: 130px;
 text-align: center;
 margin-left: 100px;
 float:left;
}
.header .header-left img{
 width: 260px;
 height: 48px;
}
.header .header-right ul{
 float:right;
 margin-right: 100px;
 overflow: hidden;
 zoom:1;
}
.header .header-right ul li{
 list-style: none;
 width:100px;
 font-size: 18px;
 color: #fff;
 line-height: 100px;
 float:left;
}


/*主体-banner*/
.main{
 margin-top: 100px;
 width: 100%;
 /*background: pink; */
 text-align: center;
}
.main .banner{
 width: 100%;
 height: 800px;
}
.main .banner img{
    width: 100%;
    height: 800px;
}
.main .banner-top1{
 width: 100%;
 height: 800px;
 background: black;
 opacity: 0.5;
 position: absolute;
 top: 100px;
 left: 0;
 z-index: 1;
}
.main .banner-top2{
 width: 500px;
 height: 460px;
 padding: 10px;
 position: absolute;
 top:100px;
 left: 50%;
 margin-top: 180px;
 margin-left: -260px;
 z-index: 2;
 text-align: center;
}
.main .banner-top2 input,.main .banner-top2 textarea{
 width: 420px;
 height: 50px;
 border: 1px solid #fff;
 font-size: 18px;
 color: #fff;
 padding-left: 10px;
 background-color: rgba(255,255,255,0);
 margin: 10px 15px;
}
.main .banner-top2 textarea{
 width: 420px;
 height: 150px;
}
.main .banner-top2 button{
 width: 200px;
 height: 50px;
 border-radius: 5px;
 background-color: rgba(255,255,255,0);
 font-size: 18px;
 color: #fff;
 border: 1px solid #fff;
 margin: 10px 15px 0 15px;
}
input::-webkit-input-placeholder{ /*WebKit browsers*/
color: #fff;
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: #fff;
}
input::-ms-input-placeholder{ /*Internet Explorer*/
color: #fff;
}
textarea::-webkit-input-placeholder{ /*WebKit browsers*/
color: #fff;
}
textarea::-moz-input-placeholder{ /*Mozilla Firefox*/
color: #fff;
}
textarea::-ms-input-placeholder{ /*Internet Explorer*/
color: #fff;
}


/*主体-about区*/
.main .about{
 width: 100%;
}
.main .about .about-container{
 width: 1200px;
 margin:40px auto;
}
.main .about .about-container .about-1{
 width: 600px;
 margin: 0 auto;
}
.main .about .about-container .about-1 h1{
 font-size: 40px;
}
.main .about .about-container .about-1 .hr-container{
 height: 4px;
 width: 600px;
 text-align: center;
 margin: 20px 0;
}
#hr{
 width: 30px;
 border-top:2px solid #07cbc9;
 margin: 0 auto;
}
.main .about .about-container .about-1 p{
    font-size: 20px;
    line-height: 30px;
    padding: 10px 0;
}
.main .about .about-container .about-2{
 width: 1100px;
 margin: auto;
}
.main .about .about-container .about-2 .about-2-box1{
 width: 380px;
 text-align: left;
 float: left;
 position: relative;
 z-index: 4;
}
.main .about .about-container .about-2 .about-2-box1 .title{
 width: 150px;
 font-size: 28px;
 margin: 5px 0;
}
.main .about .about-container .about-2 .about-2-box1 .word{
 margin: 20px 0;
 padding: 0 10px;
    background: rgba(100%,100%,100%,0.3);
    border: 1px solid #ccc;
}
.main .about .about-container .about-2 .about-2-box1 .word p{
 font-size: 18px;
 line-height: 27px;
 padding:10px 5px;
}
.main .about .about-container .about-2 .about-2-box1 .word button{
 width: 120px;
 height: 40px;
 color: #fff;
 font-size: 18px;
 background: #000;
    border: none;
    margin: 10px 5px;
}
.main .about .about-container .about-2 .about-2-box2{
 width: 650px;
 height: 435px;
 float: left;
 margin-left: -150px;
 position: relative;
 z-index: 3;
}
.main .about .about-container .about-2 .about-2-box3{
 width: 210px;
 float: left;
}
.main .about .about-container .about-2 .about-2-box3 .data{
 width: 180px;
 height: 100px;
 border: 1px solid #07cbc9;
 margin:0 0 20px 30px;
}
.main .about .about-container .about-2 .about-2-box3 .data h3{
 margin: 10px auto;
}
.main .about .about-container .about-2 .about-2-box3 .data .hr{
 margin: 10px auto;
}
.main .about .about-container .about-2 .about-2-box3 .data p{
 margin: 10px auto;
}
.main .about .about-container2{
 width: 100%;
 height: 700px;
 background: yellow;
 margin: 40px 0;
}
.main .about .about-container2 .picture,.main .about .about-container2 .word{
 width: 25%;
    height: 350px;
    float: left;
    box-sizing: border-box;
}
.main .about .about-container2 .picture img{
    width: 100%;
    height: 100%;
}
#triangle1{
 width: 0;
 height: 0;
 border-top:  15px solid transparent;
 border-bottom:  15px solid transparent;
 border-right: 30px solid #07cbc9;
 float: left;
 margin-left: -30px;
 margin-top: 160px;
}
#triangle2{
 width: 0;
 height: 0;
 border-top:  15px solid transparent;
 border-bottom:  15px solid transparent;
 border-left: 30px solid #07cbc9;
 float: left;
 margin-right:-30px;
 margin-top: 160px;
 position: relative;
 z-index: 5;
}
.main .about .about-container2 .word{
 text-align: left;
 padding: 30px;
 background: #07cbc9;
}
.main .about .about-container2 .word .title{
 font-size: 28px;
 margin-bottom: 20px
}
.main .about .about-container2 .word .p1{
 font-size: 18px;
 line-height: 27px;
 margin-bottom: 20px;
}
.main .about .about-container2 .word .p2{
 color: gray;
 line-height: 23px;
 margin-bottom: 20px;
}
 .main .about .about-container2 .word button{
 width: 120px;
 height: 40px;
 color: #fff;
 font-size: 18px;
 background: #000;
    border: none;
    margin: 0 120px;
}

/*主体-gallery区*/
.main .gallery{
 width: 100%;
}
.main .gallery .gallery-contanier{
 width: 1200px;
 margin: 40px auto;
}
.main .gallery .gallery-contanier .gallery-1{
 width: 600px;
 margin: 0 auto;
}
.main .gallery .gallery-contanier .gallery-1 h1{
 font-size: 40px;
}
.main .gallery .gallery-contanier .gallery-1 .hr-container{
 height: 4px;
 width: 600px;
 text-align: center;
 margin: 20px 0;
}
.main .gallery .gallery-contanier .gallery-1 p{
 font-size: 20px;
 line-height: 30px;
 padding: 10px 0;
}
.main .gallery .gallery-contanier .gallery-2{
 width: 1200px;
 margin: auto;
}
.main .gallery .gallery-contanier .gallery-2 dl{
 width: 360px;
 height: 300px;
 background: #000;
 float: left;
 margin-left: 30px;
 margin-top: 30px;
}
.main .gallery .gallery-contanier .gallery-2 dt{
 width: 360px;
 height: 240px;
}
.main .gallery .gallery-contanier .gallery-2 dt img{
 width: 360px;
 height: 240px;
}
.main .gallery .gallery-contanier .gallery-2 dd{
    color: #fff;
    margin-top:20px;
}


/*页脚*/
.footer{
 width: 100%;
 background: #07cbc9;
 font-size: 20px;
 line-height: 100px;
 color: #fff;
 margin: 0 auto;
 /*position: fixed;
 left: 0;
 bottom: 0;
 z-index: 10;*/
}
Annisa 2018-06-14
源自：项目：网页布局案例   2-10 作业题
24
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
妮可妮可妮_ 回答被采纳获得+3积分 2018-06-15 11:23:54

 1. 因为底部没有父元素,所以当设置宽度100%的时候就是窗口的大小像素了,但是头部设置了position：flexd,所以 跟着窗口一起动了

2.css自适应宽度有2种方式：
   1.是通过百分比来控制宽度；
   2.可以通过块状元素自动占满父级的宽度的特性来实现
当然还有一些其它方法，比如css3的flex-box布局。响应式布局等等 在前端进阶的部分我们会有专门的课程详细讲解实现方式,本作业中大家只需要完成全屏状态下的正常显示即可。

1
收起回答
  • Annisa 提问者 #1
    非常感谢！
    2018-06-15 22:05:32
  • Annisa 提问者 #2
    麻烦再问下第一个问题，底部的父元素不是body吗？之前不是说宽度设置为100%就会铺满整个网页，那为什么会是窗口的大小像素？
    2018-06-15 22:12:02
  • 妮可妮可妮_ 回复 提问者 Annisa #3
    body的的父元素是window，默认宽度也为100%，就是窗口的大小
    2018-06-17 14:24:58
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于项目作业要求的小疑问
29 1 7
关于作业的问题
23 0 5
对老师批改作业有疑惑
30 0 3
项目作业做不下去了
26 0 3
2-10作业
1 0 3

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师