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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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 编程练习
0
收起

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

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

7回答
提问者 江7856 2018-12-17 17:32:02
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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>

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

0
收起回答
  • 好帮手慕星星 #1
    测试了你的最新代码，效果是没有问题的，父元素盒子不需要设置粘性定位，没有实际效果，去掉即可。
    2018-12-17 17:57:47
提问者 江7856 2018-12-16 22:50:57
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>

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

0
收起回答
好帮手慕星星 2018-12-13 15:59:38

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

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

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

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

自己都可以试试。


0
收起回答
  • 提问者 江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

自己动手测试下。

0
收起回答
  • 提问者 江7856 #1
    感谢老师解答，如何在显示器下看图片的高宽？谢谢
    2018-12-13 13:40:53
提问者 江7856 2018-12-12 21:47:50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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>
重新提交作业，谢谢指正。


0
收起回答
提问者 江7856 2018-12-12 21:45:06

您好，有以下几个问题

1）图片地址加上no-repeat top center是居中，no-repeat？

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

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

感谢!

0
收起回答
好帮手慕星星 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’，否则不能生效。

自己完善测试下，祝学习愉快！

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

编程练习 请老师帮忙完善
15 0 4
编程练习，请求帮助完善
0 0 6
3-5编程练习 请老师帮助完善作业
0 1 1
2-4编程练习 请帮助完善
0 0 1
编程练习 请老师帮忙完善一下代码
10 0 3

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

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

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

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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