javascript - html <div>嵌套的<p>内容不显示
问题描述
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Build a Personal Portfolio Webpage</title> <link href='https://www.haobala.com/wenda/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='https://www.haobala.com/wenda/style.css'> <style type='text/css'>main header{background:#aaa;color: #fff;} </style></head><body> <header class='navbar navbar-inverse navbar-fixed-top'><p class='container'> <button 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 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='https://www.haobala.com/wenda/4957.html#top '>About</a></li> <li class='scrollable '><a href='https://www.haobala.com/wenda/4957.html#portfolio '>Portfolio</a></li> <li class='scrollable '><a href='https://www.haobala.com/wenda/4957.html#contact '>Contact</a></li></ul> </nav></p> </header> <!-- end header--> <main><header> <p 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> </p></header> </main> <footer> </footer></body></html>
问题解答
回答1：在你自己写的style里
<style type='text/css'>main header{background:#aaa;color: #fff;} </style>
加上 margin-top:50px;
<style type='text/css'>main header{background:#aaa;color: #fff;margin-top:50px;} </style>
因为你的头部是position fixed的。
回答2：看到.navbar-fixed-top的position是fixed，所以<main>元素感知不到其存在被排到页面最上面，被.navbar-fixed-top遮盖掉了。
你可以把<header class='navbar navbar-inverse navbar-fixed-top'>用一个<p>包裹起来，将这个p的height设置成和<header>的height一致，从而把下面的<main>元素挤下去。
...<p style='height: 51px;'> <header class='navbar navbar-inverse navbar-fixed-top'>... </header></p>...回答3：
先上一张图：
浏览器打开审查元素，这个p的位置如图，由于你头部的header加了.navbar-fixed-top CSS 类，而这个类带有position: fixed属性，所以你的p元素被上面一个header元素盖住了。
解决方法是，给下部main部分加上一个上边距，等于头部header的高度，这样就可以把头部header的位置空出来了，也就不会被头部header挡住p元素了。
<style type='text/css'>main header { background:#aaa; color: #fff; margin-top: 51px;}</style>
效果：
相关文章：
1. javascript - 图片能在网站显示，但控制台仍旧报错403 (Forbidden)2. javascript - sublime已经安装了babel插件和sublimelinter-jshint为什么还是显示es6语法错误？3. javascript - nginx 反向代理 js跨域问题？4. css3 - img垂直水平居中问题5. python for循环中的函数只能运行一次？6. mysql - 在PHPMyadmin上乱捣鼓后出现 了 - #2002 - — 服务器没有响应（或本地服务器的套接字没有正确设置）。7. 请教使用PDO连接MSSQL数据库插入是乱码问题?8. mysql - Sequel Pro 如何格式化（美化）SQL语句？9. 关于登录界面不跳转10. javascript - 百度地图一开始设置了中心点，怎么通过按钮在调转到对应的中心点？？？？
网公网安备