这样子做对吗

来源:4-3 编程练习

忘风

2020-05-19 10:51:49

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

   *{

   margin: 0;

   padding: 0;

   }

   html,body{

   width: 1600px;

   height: 4043px;

   }

   .out{

    width: 1600px;

    height: 4043px;

    background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png)   no-repeat center top;

   }

   .left{

    width: 224px;

    height: 363.99px;

   

    background: url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) center ;

    position: fixed;

    top: 60px;

   

   }

   .bottom{

   

    width: 224px;

    height: 363.99px;

   

    background: url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) center ;

    position: fixed;

    top: 60px;

    margin-left: 850px;

   

   }

</style>

</head>

<body>

  <div class="out">

   <div class="left">

   </div>

   <div class="bottom"></div>

   

  

   

   </div>

    

  </div>

</body>

</html>


写回答

1回答

好帮手慕小鱼

2020-05-19

同学你好,代码存在的问题如下:

1、左侧与右侧广告块没有实现垂直居中效果。

建议将左右的广告块高度设为400px,便于计算。定位的top值设为50%,并且为他们设置上边距,且上边距值为广告块所设高度的一半。

具体参考如下:

http://img.mukewang.com/climg/5ec49e1c092242bf07270300.jpg

http://img.mukewang.com/climg/5ec49dee09150ed806830300.jpg

3、右侧广告块没有紧靠屏幕右侧显示。由于为右侧广告块设置了左侧外边距,右侧广告块没有紧靠右侧屏幕显示。

http://img.mukewang.com/climg/5ec49f8d0968a70e08580482.jpg

建议:右侧广告块在定位时,将right设置为0,并去掉左侧外边距。

具体参考如下:

http://img.mukewang.com/climg/5ec49d1109dd3f1b06760294.jpg

如果我的回答帮助了你,欢迎采纳。祝学习愉快~

0

0 学习 · 40143 问题

查看课程

相似问题