老师帮忙检查一下作业
来源：4-3 编程练习
汤姆克鲁琛
2020-03-28 17:07:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.cont{
width:2000px;
height:4100px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) center top no-repeat;
position:relative;
}
.nav1{
width:225px;
height:400px;
background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) left top no-repeat;
position:fixed;
left:0;
top:50%;
margin-top:-200px;
}
.nav2{
width:225px;
height:400px;
background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) right top no-repeat;
position:fixed;
right:0;
top:50%;
margin-top:-200px;
}
</style>
</head>
<body>
<div class="cont">
<div class="nav1"></div>
<div class="nav2"></div>
</div>
</body>
</html>写回答
1回答
-
同学你好，定位的计算没有问题，但是实际效果没有居中，原因如下：
图片的实际高度是224*364，同学将左右元素的尺寸设置成225*400，背景图片填充不满，有空白，如图：
建议修改左右元素的尺寸为图片的尺寸:
另外同学将内容宽度设置为2000px，由于分辨率的不同，会出现滚动条如图：
建议将内容宽度设置为100%，如图：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题