一个关于页面显示的问题
来源：7-2 编程练习
计算机蠢材
2021-03-16 10:41:03
相关代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#i1{
margin-top: -10px;
align-content:center;
background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png" );
background-repeat:no-repeat;
height:1600px;
background-position: top center;
}
#i2{
height:200px;
width:200px;
background-image:url("http://climg.mukewang.com/5a3383c70001f1b702240364.png");
background-repeat:no-repeat;
position:fixed;
float:left;
left: 5%;
top: 35%;
}
#i3{
height:200px;
width:200px;
background-image:url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png");
background-repeat:no-repeat;
position:fixed;
float:right;
right: 5%;
top: 35%;
}
</style>
</head>
<body>
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
</body>
</html>
相关截图：
你好 我这个浏览器显示比例为100%的时候这个页面显示不全(第一张图所示),我想请问一下是代码的问题吗,还是浏览器的问题
写回答
1回答
-
同学你好，同学的代码中使用的背景图，背景图是根据div大小进行设置的，同学可以修改高度，将高度修改为4000px试一下
或不使用背景图，使用img标签进行设置，则图片可以撑起div高度，与浏览器一般高。参考代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告栏</title>
<style type="text/css">
.div1{
width: 100%;
}
.img1{
width: 100%;
}
.div2{
width: 224px;
height: 364px;
position: fixed;
top: 20%;
left: 1%;
}
.div3{
width: 224px;
height: 364px;
position: fixed;
top: 20%;
right: 1%;
}
</style>
</head>
<body>
<div class="div1">
<img class="img1" src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
</div>
<div class="div2">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
</div>
<div class="div3">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</body>
</html>祝学习愉快~
0
相似问题