这样子做对吗
来源:4-3 编程练习
忘风
2020-05-19 10:51:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 1600px;
height: 4043px;
}
.out{
width: 1600px;
height: 4043px;
background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat center top;
}
.left{
width: 224px;
height: 363.99px;
background: url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) center ;
position: fixed;
top: 60px;
}
.bottom{
width: 224px;
height: 363.99px;
background: url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) center ;
position: fixed;
top: 60px;
margin-left: 850px;
}
</style>
</head>
<body>
<div class="out">
<div class="left">
</div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
1回答
好帮手慕小鱼
2020-05-19
同学你好,代码存在的问题如下:
1、左侧与右侧广告块没有实现垂直居中效果。
建议将左右的广告块高度设为400px,便于计算。定位的top值设为50%,并且为他们设置上边距,且上边距值为广告块所设高度的一半。
具体参考如下:


3、右侧广告块没有紧靠屏幕右侧显示。由于为右侧广告块设置了左侧外边距,右侧广告块没有紧靠右侧屏幕显示。

建议:右侧广告块在定位时,将right设置为0,并去掉左侧外边距。
具体参考如下:

如果我的回答帮助了你,欢迎采纳。祝学习愉快~