老師請看哪裡需要改善

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
      .page{
        width: 1905px ;
        height:4050px;
        background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png);
        position: relative;
      }
      .adLeft{
        width: 224px;
        height: 346px;
        background: url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png);
        position: fixed;
        top: 300px;
      }
            .adRight{
        width: 224px;
        height: 346px;
        background: url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png);
        position: fixed;
        top: 300px;
        right: 0px;
      }
    </style>
  <title></title>
</head>
<body>
  <div class="page">
    <div class="adLeft"></div>
    <div class="adRight"></div>
  </div>
</body>
</html>

請問關於我寫的top: 300px; 是我用幾個數字測出來的，有更好的寫法嗎?

有辦法準確知道視口垂直正中間距離視口上方的像素高度是多少呢?

weixin_慕雪0272820 2020-06-08

源自：CSS定位（position） 4-3 编程练习

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2020-06-09 12:08:26

同学你好，body是标签，不是class类，所以前面不需要加点。参考修改

还有左右两侧小盒子高度应该是364px，一半才是182px

自己再测试下，祝学习愉快！

收起回答

好帮手慕星星 2020-06-09 10:13:23

同学你好，代码中问题如下：

1、水平方向上出现了滚动条

代码中给page设置固定宽度1905px，由于每个显示器的分辨率不同，宽度也会不同。建议修改宽度为100%

body默认有8px外边距，可以去掉，看起来美观些

2、左右两侧图片没有显示完整，图片大小如下

根据图片大小调整，并且垂直方向上没有居中显示，代码中固定的值可以设置为百分比，然后再移动自身高度的一半（负值）

自己再测试下，祝学习愉快！

收起回答

提问者 weixin_慕雪0272820 #1

老師我代碼設body{margin:0} 或0後面加px 都沒有變化呢。效果不是應該背景更靠近視口嗎? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> .body{margin:0;} .page{ width: 100% ; height:4050px; background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png); position: relative; } .adLeft{ width: 224px; height: 346px; background: url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png); position: fixed; top: 50%; margin-top: -182px; } .adRight{ width: 224px; height: 346px; background: url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png); position: fixed; top: 50%; right: 0px; margin-top: -182px; } </style> <title></title> </head> <body> <div class="page"> <div class="adLeft"></div> <div class="adRight"></div> </div> </body> </html>

2020-06-09 11:40:01