HTML内容未显示

-1

所以这是我的第二个HTML项目。我在投资组合页面的顶部用一些介绍性文字制作了全屏图像。但是当我尝试在图像下方再制作另一个div时，用户可以向下滚动并查看更多内容，因此我在该屏幕上显示的任何东西都显示在屏幕上。你自己看。HTML内容未显示

我的代码：

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%; 
}

来源

2017-02-26 Carlos A Rodriguez

你缺少内容？看起来你的HTML被切断了，在“查看我的投资组合”后我没有看到任何文字 –

您应该先调试您的代码。 a）您的代码缺失<head>; b）对于每个<h1>你有一个</h2>作为结束标签; c）如果你的'另一个'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>

作为一种新的学习，你应该养成不使用CSS混合HTML的习惯代码，例如，你应该把所有样式都放在css样式表中的两个<h1>比html中，它使得代码更清晰。

来源

2017-02-26 02:12:11 hcheung

HTML内容未显示

回答

相关问题