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> 谢谢!
0
收起
正在回答 回答被采纳积分+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>
老师,您好!这里重新提交作业,请老师帮助看一下。
江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 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
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> 重新提交作业,谢谢指正。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星