Question

首先，我一直试图让盒子向下移动，这样你就能看到阴影（如果有更简单的方法，我很乐意听到它），但是当我把它们全部放下时，它们就在一个下面另一个，所以你看不到它们。

其次，这是最重要的，第五个div框堆叠在第四个顶部。我不知道为什么。我和第四个一样做了第五个。我真的希望这不是一个愚蠢的问题，但我已经搜索了我的代码，但我不能。

 <head>
  <style>
    html, body {
        margin: 0;
        height: 100%;
    }

    h1, h2, h3, body {
        font-family: "Arial", Helvetica, sans-serif;
    }

    .topp {
        margin-right: 500px;
        background-image: url('gamerbeta.jpg');
        background-color: fff;
        width: 100%;
        height: 430px;
        box-shadow: 3px 3px 4px black;
    }

    .second {
        position: relative;
        top: 10px;
        background-color: #white;
        width: 100%;
        height: 430px;
        box-shadow: 3px 3px 4px black;
    }
        .secondword {
            position:absolute;
            top: -30px;
            left: 435px;
            font-size: 50px;
        }

        .secondp {
            position:absolute;
            top: 80px;
            left: 1000px;
            text-align: center;
            font-size: 40px;
        }

        .secondimage {
            position: absolute;
            top: 190px;
            left: 1230px;
        }

        .secondwordtwo {
            position:absolute;
            top: 300px;
            left: 1180px;
            font-size: 30px;
            font-style: italic;
        }

        .arrow {
            position: absolute;
            top: 370px;
            left: 900px;
        }

    .third {
        position: relative;
        top: 10px;
        background-color: #D8D8D8;
        width: 100%;
        height: 430px;
        box-shadow: 1px 1px 4px black;
    }
        .thirdword {
            position:absolute;
            top: 130px;
            left: 350px;
            font-size: 38px;
        }

        .thirdp {
            position:absolute;
            top:200px;
            left:350px;
            font-size: 26px;
            width: 670px;
        }

        .thirdpic {
            position:absolute;
            top: 25px;
            left:1150px;
        }

    .fourth {
        position: relative;
        top: 10px;
        height: 430px;
        width: 100%;
        background-color: white;
        box-shadow: 3px 3px 4px black;
    }
        .fourthpic {
            position: absolute;
            top: 10px;
            left: 460px;

        }
        .fourthword {
            position: absolute;
            top: 100px;
            left: 540px;
            font-size: 38px;
            width: 500px;
        }
        .fourthp {
            position: absolute;
            top: 170px;
            left: 540px;
            font-size: 26px;
            width: 650px;
        }

    .fifth {
        position: relative;
        top: 10px;
        height: 430px;
        width: 100%;
        background-color: #D8D8D8;
        box-shadow: 3px 3px 4px black;
    }
   </style>
  </head>

    <body>
    <div class=topp></div>

    <div class=second>
      <div class=secondword><h1>BETA</h1></div>
      <div class=secondp>EXCLUSIVE ACHIEVEMENT<br>FOR JOINING BETA</div>
      <div class=secondimage><img src="test.png" alt=""></div>
      <div class=secondwordtwo>Beta Tester</div>
      <div class=arrow><img src="arrow.png" alt="" height="42" width="42"></div>
    </div>


    <div class=third>
      <div class=thirdword>FIND GAMERS JUST LIKE YOU...</div>
      <div class=thirdp>test here to show you</div>
      <div class=thirdpic><img src="gamer.png" alt="" height="375" 
        width="394"></div>
    </div>

    <div class=fourth>
    <div class=fourthpic><img src="dream.jpg" alt="" height="420" width="420"
    </div>
    <div class=fourthword>STAY CONNECTED...</div>
    <div class=fourthp>test here to show you</div>
    </div>

    <div class=fifth>

    </div>
    </body>

Answer 1

正如Adrei所提到的，类名需要在双引号之间。

此外，您在第145行错过了图片代码的结束三角括号（＆gt; ）。

<img src="dream.jpg" alt="" height="420" width="420">

第五个div叠加在第四个之上

1 个答案: