Question

我对编码很新，而且我一直在设计一个页面，但我无法完成一件事。在下面的代码中，div类：.third根本没有出现。我尝试使用溢出等，但它只是没有显示，好像它不存在。任何帮助都会很棒。

 <head>
<style>
div{
    overflow: auto;
}
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;
    float: top;
    box-shadow: 3px 3px 4px black;
 }

.second{
     position: relative;
    top: 5px;
    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: 380px;
    left: 900px;
 }
 .third{
    position: relative;
    background-color: #D8D8D8;
    width: 100%;
    height: 430px:
    box-shadow: 1px 1px 4px black;
 }

<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>

</body>

Answer 1

你有一个错字。它应该是;而不是:上的height：

.third {
  position: relative;
  background-color: #D8D8D8;
  width: 100%;
  height: 430px;
  box-shadow: 1px 1px 4px black;
}

Answer 2

好的，快点看看。看起来你的班级第三是处于最底层的事情。因为它不属于你的第二类，所以它位于最底层。我做了什么来找到它是在div内部添加了一些文本来找到它。

喜欢这样

<div class=third>
Where is my div???
</div>

我最终在页面的最底部找到了div。希望有所帮助！

Answer 3

正如@MikeC回答的那样，你有一个拼写错误，你使用的是:而不是;。这种错误也是由专业人士完成的。要检查是否有任何拼写错误或任何其他常见错误，您应该考虑使用浏览器控制台。每个浏览器都有自己的控制台，开发人员可以使用它来验证他们的代码。

以下是不同浏览器控制台上某些教程的链接：

Microsoft Internet Explorer

为什么这个div不会出现？

3 个答案: