我正在开展一个小项目,仅仅是为了我自己的乐趣。我在html页面的顶部创建了一个导航栏,我使用了一些css使它看起来更漂亮。
这是html
<html>
<head>
<title> Website </title>
<style type="text/css">
body {
margin: 0;
background: #F2F2F2;
}
.navbar {
margin: 0;
padding: 0;
width: 100%;
height: 45px;
background: #12B0CD;
position:fixed;
}
#navbar-logo {
font-family:'Lato', Arial;
font-size: 35px;
color: white;
border: none;
background: #12B0CD;
}
.content {
top: 50px;
margin: none;
width: 100%;
height: 50%;
z-index: -1;
}
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-logo">
<button id="navbar-logo">Fancy Name </button>
</div>
</div>
<div class="content">
<div id="content-box">
</div>
</div>
</body>
</html>
如果你把它弹入记事本并在浏览器中打开它,你会发现课程内容没有显示,我不知道为什么。我需要帮助。在普通代码中,我使用样式表,我不知道这是否会改变任何东西。
答案 0 :(得分:1)
由于您的内容框为空,并且您正在使用百分比,因此该框需要其父级(正文)具有高度。如果您在身上设置了width:100%;height:100%;
,则应该会看到该框。