老师检查下
来源：7-2 编程练习
罗杰明
2020-01-08 11:14:22
<html>
<head>
<meta charset="UTF-8">
<title>网站测试</title>
<style type="text/css">
.div2{
width:200px;
height:200px;
position:fixed;
overflow:hidden;
top:200px;
}
.div3{
width:200px;
height:200px;
position:fixed;
overflow:hidden;
top:200px;
right:15px;
}
</style>
</head>
<body>
<div class="div1">
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png"/>
<div class="div2"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"/></div>
<div class="div3"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"/></div>
</div>
</body>
</html>
1回答
-
同学你好，1. 测试代码浏览器下方出现滚动条，如下图所示：
建议同学将div1 下的img的宽度调整为100%。修改后代码如下：
2. 题目要求对联广告需要垂直居中，目前同学的定位效果是固定距离窗口上缘有200px的距离，建议修改一下：给图片设置top为50%，这个div的上边缘就相对于窗口居中了。但不是div的中间线和窗口居中，所以我们需要将它“拽回来”一些。给div一个高度（200px）。然后给div一个负的外边距。margin-top设置为高的一半。将其“往上拽”高度的一半。修改后代码如下：
.div2{ width:200px; height:200px; position:fixed; overflow:hidden; top:50%; margin-top: -100px; } .div3{ width:200px; height:200px; position:fixed; overflow:hidden; top:50%; margin-top: -100px; right:15px; } .div1 img{ width: 100%; }如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
