请老师检查是否正确？
来源：7-2 编程练习
weixin_慕容0179653
2019-07-12 22:15:09
<!DOCTYPE html>
<html>
<head>
<title>固定定位案例</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.div1 {
position: fixed;
top: 30%;
}
.div2 {
position: fixed;
top: 30%;
right: 0px;
}
</style>
</head>
<body>
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
<div class="div1">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
</div>
<div class="div2">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</body>
</html>
1回答
-
好帮手慕查理
2019-07-14
您好，滚动样式实现。但是底部出现滚动条，可以将图片宽度设置为100%。另外左右两侧的图片设置的是距离顶部30%，是不能居中的，建议设置为50%，在往上移动图片高度一半的距离。参考如下：
<!DOCTYPE html> <html> <head> <title>固定定位案例</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .div1 { width:220px; height:360px; position: fixed; top: 50%; margin-top:-180px; } .div2 { position: fixed; width:220px; height:360px; top: 50%; right: 0px; margin-top:-180px; } </style> </head> <body> <img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png" width="100%"> <div class="div1"> <img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"> </div> <div class="div2"> <img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"> </div> </body> </html>如果解决了您的问题，请采纳。祝学习愉快！
0
相似问题