4-3 练习 这样对吗
来源：4-3 编程练习
慕移动5599480
2020-09-16 01:00:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bg{width:1903px;
height:4033px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat;
}
.left{width:224px;
height:364px;
background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) no-repeat;
position:fixed;
left:0;
margin-top:182px;
}
.right{width:224px;
height:364px;
background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) no-repeat; position:fixed;
right:0;
margin-top:182px;}
</style>
</head>
<body>
<div class="bg">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
1回答
-
好帮手慕鹤
2020-09-16
同学你好，效果中有两个问题：
1、页面出现了水平滚动条，如下：
这是因为在写css样式之前，没有清除掉浏览器自带的样式，建议在写css样式之前，先清除浏览器自带的样式；
建议给.bg容器的宽度更改为100%，这样在电脑分辨率小于1903px的的情况下，宽度都能按照100%来显示。参考如下：
2、左侧和右侧的广告区域没有垂直居中显示，如下：
建议通过top：50%；margin-left：负容器高度的一半来实现垂直居中的效果，参考下图：
图片的高度是364px，负一半就是-（364/2）=-182px；
如果帮助到了你，欢迎采纳，祝学习愉快！
0
相似问题