老师代码实现了，但还有几个问题
来源：4-3 编程练习
yarwood
2020-07-03 16:37:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;
padding:0:;
}
.mooc{width:100%;
height:4100px;
background:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") center no-repeat;
}
.web{position:fixed;
left:0;
top:50%;
margin-top:-150px;
width:220px;
height:300px;
}
.java{position:fixed;
right:0;
top:50%;
margin-top:-150px;
width:220px;
height:300px;
}
</style>
</head>
<body>
<div class="mooc">
<div class="java"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png" ait="web"></div>
<div class="web"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png" ait="Java"></div>
</div>
</body>
</html>
如图
问题1:width已经设置100%了，并没有根据窗口大小而自适应，浏览器全屏了也没有显示完全
问题2:f12里面点击两侧广告，并没有看到 margin-top:-150px这个偏移量
1回答
-
同学你好，代码中有如下问题：
1. 通配符选择器中有多余的冒号，如下：
去除即可。
2. 图片超出父元素，如下：
建议调整父元素的宽高与图片一致，以“java”这张图为例：
问题解答如下：
1. 如果浏览器的分辨率较小，小于图片的宽度，那么当图片作为背景图显示时，的确会显示不全。后面的课程我们会学习调整背景图的尺寸，就可以实现让背景图显示完全了，同学目前了解下这个现象就行。
2. “ margin-top:-150px”这个偏移量，是设置在图片父元素上的，比如“java”，所以需要查看“java”的样式，才能看到，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题
回答 3
回答 4