4-3 麻烦老师帮我修改一下
来源：4-3 编程练习
Mr丶Zhang小
2018-01-30 16:39:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:100%;
height:3000px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) center top no-repeat;
background-size:contain;
}
.l-banner{
width: 224px;
height: 364px;
background: url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) no-repeat;
position: fixed;
top:50%;
left: 0;
margin-top:-182px;
}
.r-banner{
width: 224px;
height: 364px;
background: url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) no-repeat;
position: fixed;
top:50%;
right: 0;
margin-top:-182px;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="l-banner"></div>
<div class="r-banner"></div>
</body>
</html>
1回答
-
bbbboom
2018-01-30
我测试了你的代码，效果是没有问题的，还有更简单的写法，不用设置背景图片，直接用img标签就行，可以参考一下我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content {
width: 100%;
height: 3000px;
}
.banner {
width: 224px;
height: 364px;
position: fixed;
top: 50%;
margin-top: -182px;
}
.left{
left: 0;
}
.right{
right: 0;
}
</style>
</head>
<body>
<div class="content">
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
</div>
<div class="banner left">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
</div>
<div class="banner right">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</body>
</html>
如果有更简单的方法，可以和我分享哦！(#^.^#)
0h018-01-31
相似问题