html嵌套的内容不显示
内容不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Build a Personal Portfolio Webpage</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="D:/web/rule/bootstrap-Normalize.css">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./style.css">
<style type="text/css">
main header{
background:#aaa;
color: #fff;
}
</style>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="navbar-collapse collapse" id="navbar" role="navigation style=" height: 11px; ">
<ul class="nav navbar-brand navbar-left ">Free Code</ul>
<ul class="nav navbar-nav navbar-right ">
<li class="scrollable "><a href="#top ">About</a></li>
<li class="scrollable "><a href="#portfolio ">Portfolio</a></li>
<li class="scrollable "><a href="#contact ">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- end header-->
<main>
<header>
<div class="intro-text">
<p>
Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
</p>
<hr class="star-bright">
<<pseudo:after>></<pseudo:after>>
</hr>
<span class="skills">Web Developer - User Experience Designer - Graphic Artist</span>
</div>
</header>
</main>
<footer>
</footer>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
先上一张图：
浏览器打开审查元素，这个
p的位置如图，由于你头部的header加了.navbar-fixed-topCSS 类，而这个类带有position: fixed属性，所以你的p元素被上面一个header元素盖住了。解决方法是，给下部
main部分加上一个上边距，等于头部header的高度，这样就可以把头部header的位置空出来了，也就不会被头部header挡住p元素了。效果：
在你自己写的style里
加上 margin-top:50px;
因为你的头部是position fixed的。
看到.navbar-fixed-top的position是fixed，所以<main>元素感知不到其存在被排到页面最上面，被.navbar-fixed-top遮盖掉了。
你可以把<header class="navbar navbar-inverse navbar-fixed-top">用一个<div>包裹起来，将这个div的height设置成和<header>的height一致，从而把下面的<main>元素挤下去。