这样对吗?
来源：4-3 编程练习
asl8116
2020-06-20 15:01:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.bj{
width:100%;
height:4033px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png)center no-repeat;
position:relative;
}
.zb{
width:160px;
height:auto;
position:fixed;
top:50%;
margin-top:-150px;
left:0px;
}
.yb{
width:160px;
height:auto;
position:fixed;
top:50%;
margin-top:-150px;
right:0px;
}
</style>
</head>
<body>
<div class="bj">
<div class="zb"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"></div>
<div class="yb"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"></div>
</div>
</body>
</html>
2回答
-
同学你好，可以把图片放到浏览器中查看，例如：
在实际工作中，设计师会提供设计图，同学根据设计稿设置宽高即可。
祝学习愉快~
0h020-06-20 -
好帮手慕言
2020-06-20
同学你好，使用同学提供的代码测试，是没有垂直居中的，上下间距不一致。另外：给图片的父级设置的宽度太小了，导致图片溢出父级，如下：
建议：修改图片父级的宽高和margin-top值，如下：
有很多相同的代码，可以使用群组选择器简化代码，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-06-20
相似问题