Question

所以这是我的第二个HTML项目。我在我的投资组合页面的顶部创建了一个全屏图像，其中包含一些介绍文本。但是当我尝试在图像下面创建另一个div以便用户可以向下滚动并查看更多内容时，我放在该div docent中的任何内容都会显示在屏幕上。你自己看。

https://codepen.io/CarbCode/pen/KWweBL

我的代码：

HTML

<link href="https://fonts.googleapis.com/css?

family=Lato:100|Palanquin+Dark:500" rel="stylesheet">
</head>
<div id="header" class="container-fluid">
  <img src="https://image.ibb.co/mqxeqa/BG1.jpg" alt="BG1" class="headerBg">
  <h1 class="text-white" style="font-family:'Palanquin Dark'; padding-left: 5%;">Hey, I'm Carlos </h2> 
<h1 class="secondTit text-white typewriter" id="Typewrite"style="font-family:'Lato';"><i>Developer in Training/></i></h2>
<a href="#"><p id="learnmore"style="color: #a19f9f;"><i>View my portfolio</i><br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&#8595;<p><a>
</div>
  <div class="row">
    <div class="block1">
      <i class="fa fa-free-code-camp"></i>

CSS

#header {
  position: relative;
}

.headerBg {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  hight: 85%;
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .01em;
  animation: typing 2s steps(50, end), blink-caret 1.2s step-end infinite;
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 100%;
}

h1 {
  position: absolute;
  font-size: 6rem;
  padding-top: 16.5%;
  padding-left: 3%;
}

#learnmore {
  position: relative;
  font-size: 3rem;
  padding-top: 44%;
  padding-left: 40%;
  line-height: 0.9
}

.secondTit {
  padding-top: 25%;
  padding-left: 10%;
}

Answer 1

您应该先调试代码。 a）您的代码缺少<head>; b）对于每个<h1>，您的</h2>作为结束标记; c）如果你的另一个＆＃39; div表示<div class="row">，您的代码不完整，没有任何</div>。要回答您的问题，请不要确定您使用的是哪种css框架，但我认为<div class="row">应该在<div class="container-fluid">内，如下所示：

<div id="header" class="container-fluid">
   <!-- some content -->
   <div class="row">
     <!-- content for the row -->
   </div>
   <div class="row">
     <!-- content for another row -->
   </div>
</div>

作为一个新的学习者，你应养成不将html与css代码混合的习惯，例如，你应该将两个<h1>的所有样式放在css样式表中而不是html中，它会使代码更清洁。

HTML内容未显示

1 个答案: