指教=====
来源：4-3 编程练习
weixin_慕工程5378897
2020-09-12 11:45:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.heared{background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png);height: 2000px;}
.lefted{position: fixed;margin-left:80%;margin-top:300px;}
.righted{position: fixed;margin-top:300px;margin-left:14%;}
</style>
</head>
<body>
<div class="heared">
<div class="lefted"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"></div>
<div class="righted"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"></div>
</div>
</body>
</html>
1回答
-
好帮手慕鹤
2020-09-12
同学你好，代码效果中有以下几个问题：
1、左侧、右侧广告区域没有固定在浏览器的左侧和右侧，如下：
想要把左侧、右侧广告区域分别固定在浏览器的左侧、右侧的话，需要通过position：fixed；属性来根据浏览器窗口定位。然后左侧广告区域设置left：0；让它定位在浏览器窗口左侧。右侧广告区域设置right：0；让它固定在浏览器窗口右侧。
2、左侧、右侧广告没有实现垂直居中。
可以设置top：50%；margin-top：-图片宽度的一半来实现垂直居中的效果。
（1）图片本身的高度是364px，而图片容器的高度是368px，这是因为img标签为行内元素，默认存在间隙；可以给img标签设置display：block；把默认的间隙去掉。
（2）垂直居中设置，top：50%，margin-top：-（364/2=182px）。
如果帮助到了你，欢迎采纳，祝学习愉快！
加油！
0
相似问题