请老师帮忙检查一下,谢谢~

请老师帮忙检查一下,谢谢~

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
      body{
        margin:0;
        padding: 0;
        text-align: center;
      }
      .BOX{
        width: 90%;
        height: 1000px;
        margin: 0 auto;
        position: absolute;
        top:50%; 
        left: 50%;
        margin-left: -45%;
        margin-top: -600px;
      }
      .BigBox{
        width: 100%;
        height: 700px;
        background:lightblue;
      }
      .BigBox img{
        width: 100%;
        height: 600px;
      }
      .p1{
        width: 35%;
        position: absolute;
        padding-top: 50px;
        margin-left: 10%;
      }
      .p2{
        width: 35%;
        position: absolute;
        right: 0;
        padding-top: 50px;
        margin-right: 10%;
      }
      .SmallBox{
        width: 100%;
        height: 400px;
        background:pink;
      }
      .SmallBox img{
        width: 100%;
        height: 200px;
      }
      .p3{
        width: 15%;
        position: absolute;
        padding-top: 100px;
        margin-left: 10%;
      }
      .p4{
        width: 15%;
        position: absolute;
        padding-top: 100px;
        margin-left: 42.5%;
      }
      .p5{
        width: 15%;
        position: absolute;
        right: 0;
        padding-top: 100px;
        margin-right: 10%;
      }
  </style>
</head>
<body>
  <div class="BOX">
   <div class="BigBox">
     <div class="p1"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"></div>
     <div class="p2"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"></div>
  </div>
   <div class="SmallBox">
     <div class="p3"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"></div>
     <div class="p4"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"></div>
     <div class="p5"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"></div>
   </div>
  </div>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
小于飞飞 2018-01-11 18:22:18

.p2,.p3,.p4{

        width: 15%;

        position: absolute;

        padding-top: 100px;

统一设置,减少代码冗余。

  • 提问者 WeaverSimon #1
    懂了!感谢指导~
    2018-01-11 18:27:28
小于飞飞 2018-01-11 18:11:38

根据要求,整体效果ok,代码可以优化,如p1~p5相同代码可以提出统一设置,注:这块通过margin设置就可以,可以不使用position。希望对你有帮助。

  • 提问者 WeaverSimon #1
    统一设置的话,那是不是直接给p1~p5设置成一个div块啊?感谢老师解答!
    2018-01-11 18:18:38
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师