4-3编程练习 请老师帮助完善

4-3编程练习 请老师帮助完善

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
   margin:0;
   padding:0;
}
.yes{
    width:100%;
    height:4033px;
    background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png)no-repeat top center;
     }
 .one{
     position:fixed;
     width:500px;
      height:400px;
      background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png)no-repeat top center;
      right:0;
      top:50%;
      margin-top:-200px;
      
 }
 .two{
     width:500px;
      height:400px;
     background:url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png)no-repeat top center;
     position:fixed;
     left:0;
     top:50%;
     margin-top:-200;
 }
</style>
</head>
<body>
<div class="yes">
   
   <div class="one"></div>
   <div class="two"></div>
</div>

</body>
</html>
谢谢!


正在回答 回答被采纳积分+1

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

7回答
提问者 江7856 2018-12-17 17:32:02
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
   *{margin:0px;
    padding:0px;
   }
   .yes{
       width:100%;
       height:4033px;
       background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png)no-repeat scroll center;
       position:sticky;
       top:0px;
   }
   .right{width:224px;
         height:364px;
         position:fixed;
         right:0px;
         top:50%;
         margin-top:-182px;
         background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png)no-repeat scroll center;
   }
         .left{width:224px;
                height:364px;
                position:fixed;
           left:0px;
           top:50%;
            margin-top:-182px;
             background:url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png)no-repeat scroll center;
         }
</style>
</head>
<body>
<div class="yes">
  <div class="left"></div> 
  <div class="right"></div>
</div>
</body>
</html><html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
   *{margin:0px;
    padding:0px;
   }
   .yes{
       width:100%;
       height:4033px;
       background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png)no-repeat scroll center;
       position:sticky;
       top:0px;
   }
   .right{width:224px;
         height:364px;
         position:fixed;
         right:0px;
         top:50%;
         margin-top:-182px;
         background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png)no-repeat scroll center;
   }
         .left{width:224px;
                height:364px;
                position:fixed;
           left:0px;
           top:50%;
            margin-top:-182px;
             background:url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png)no-repeat scroll center;
         }
</style>
</head>
<body>
<div class="yes">
  <div class="left"></div> 
  <div class="right"></div>
</div>
</body>
</html>

老师,您好!这里重新提交作业,请老师帮助看一下。

  • 测试了你的最新代码,效果是没有问题的,父元素盒子不需要设置粘性定位,没有实际效果,去掉即可。
    2018-12-17 17:57:47
提问者 江7856 2018-12-16 22:50:57
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
 *{
   margin:0;
   padding:0;
 }
 .yes{
     width:100%;
     height:4033px;
     background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png)no-repeat top center;
     position:sticky;
     top:10px;
     border:1px solid #ff0000;
 }
 .one{
     width:224px;
     height:364px;
     background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png)no-repeat top center;
     
     position:fixed;
     right:0;
     top:50%;
     margin:-112px;
 }
 .two{
      width:224px;
      height:364px;
      background:url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png)no-repeat top center;
      position:fixed;
      left:0;
      top:50%;
      margin:-112px;
 }
 
</style>
</head>
<body>
   <div class="yes">
       <div class="one"></div>
       <div class="two"></div>
   </div>
</body>
</html>

请问老师,两侧的图片没能固定在背景上,吸附没有效果,是固定位置不对吗?

好帮手慕星星 2018-12-13 15:59:38

可以将图片链接放到浏览器地址栏中打开,然后打开控制台(F12),点击最左侧的箭头,然后鼠标移入到图片上,就会显示图片的宽高:

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

或者是将图片另存为保存到本地文件夹中,点击图片,就会在文件夹下面显示图片信息:

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

自己都可以试试。


  • 提问者 江7856 #1
    谢谢,知道了
    2018-12-13 16:14:48
好帮手慕星星 2018-12-13 11:17:13

1、图片地址加上no-repeat top center是居中,no-repeat?

no-repeat是设置图片不重复,是background-repeat的属性值。如果父容器比较大,图片比较小,图片会重复显示,直到水平方向或者垂直方向充满容器位置,为了防止这种情况,可以设置这个属性。

2、慕课网背景的图片设置的高度为何是4033px,怎么计算的?

图片在1920x1080的显示器下高度是4033px的。

3、练习中图片只能显示2/3,没法看全图,不知道是否设置正确?

第一次回复中老师给出了建议,可以将盒子左右两侧的盒子设置成图片的宽度,这样就没有图片填充不满盒子的情况了,还有top值设置为50%以后,调整的是margin-top值为自身高度的一半,左右两侧的方向是不用调整的。

参考修改:

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

自己动手测试下。

  • 提问者 江7856 #1
    感谢老师解答,如何在显示器下看图片的高宽?谢谢
    2018-12-13 13:40:53
提问者 江7856 2018-12-12 21:47:50
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
 *{
   margin:0;
   padding:0;
 }
 .yes{
     width:100%;
     height:4033px;
     background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png)no-repeat top center;
 }
 .one{
     width:400px;
     height:300px;
     background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png)no-repeat top center;
     background-size:cover;
     position:fixed;
     right:0;
     top:50%;
     margin:-150px;
 }
 .two{
      width:400px;
      height:300px;
      background:url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png)no-repeat top center;
      position:fixed;
      left:0;
      top:50%;
      margin:-150px;
 }
 
</style>
</head>
<body>
   <div class="yes">
       <div class="one"></div>
       <div class="two"></div>
   </div>
</body>
</html>
重新提交作业,谢谢指正。


提问者 江7856 2018-12-12 21:45:06

您好,有以下几个问题

1)图片地址加上no-repeat top center是居中,no-repeat?

2)慕课网背景的图片设置的高度为何是4033px,怎么计算的?

3)练习中图片只能显示2/3,没法看全图,不知道是否设置正确。

感谢!

好帮手慕星星 2018-12-12 19:18:06

1、one盒子虽然相对于浏览器垂直居中显示了,但是图片没有充满整个容器:

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

可以使用background-size:cover;让图片充满整个父容器,但是这个属性是CSS3中的,在后面的课程中会学习到。

或者直接将父容器的宽高设置为图片宽高:

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

然后再进行定位,会方便些。

2、two盒子除了进行上面的设置之后,还需要修改margin-top值:

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

没有添加单位‘px’,否则不能生效。

自己完善测试下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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