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>
谢谢！

江7856 2018-12-12

源自：CSS定位（position） 4-3 编程练习

收起

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>

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

收起回答

好帮手慕星星 #1

测试了你的最新代码，效果是没有问题的，父元素盒子不需要设置粘性定位，没有实际效果，去掉即可。

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），点击最左侧的箭头，然后鼠标移入到图片上，就会显示图片的宽高：

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

自己都可以试试。

收起回答

提问者江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值为自身高度的一半，左右两侧的方向是不用调整的。

参考修改：

自己动手测试下。

收起回答

提问者江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>
重新提交作业，谢谢指正。

收起回答