javascript - html <div>嵌套的<p>內(nèi)容不顯示
問題描述
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Build a Personal Portfolio Webpage</title> <link href='http://www.gepszalag.com/wenda/css/bootstrap.min.css' rel='stylesheet'> <link rel='stylesheet' href='D:/web/rule/bootstrap-Normalize.css'> <link rel='stylesheet' > <link rel='stylesheet' href='http://www.gepszalag.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='http://www.gepszalag.com/wenda/4957.html#top '>About</a></li> <li class='scrollable '><a href='http://www.gepszalag.com/wenda/4957.html#portfolio '>Portfolio</a></li> <li class='scrollable '><a href='http://www.gepszalag.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>
因?yàn)槟愕念^部是position fixed的。
回答2：看到.navbar-fixed-top的position是fixed，所以<main>元素感知不到其存在被排到頁面最上面，被.navbar-fixed-top遮蓋掉了。
你可以把<header class='navbar navbar-inverse navbar-fixed-top'>用一個(gè)<p>包裹起來，將這個(gè)p的height設(shè)置成和<header>的height一致，從而把下面的<main>元素?cái)D下去。
...<p style='height: 51px;'> <header class='navbar navbar-inverse navbar-fixed-top'>... </header></p>...回答3：
先上一張圖：
瀏覽器打開審查元素，這個(gè)p的位置如圖，由于你頭部的header加了.navbar-fixed-top CSS 類，而這個(gè)類帶有position: fixed屬性，所以你的p元素被上面一個(gè)header元素蓋住了。
解決方法是，給下部main部分加上一個(gè)上邊距，等于頭部header的高度，這樣就可以把頭部header的位置空出來了，也就不會被頭部header擋住p元素了。
<style type='text/css'>main header { background:#aaa; color: #fff; margin-top: 51px;}</style>
效果：
相關(guān)文章：
1. 淺談vue生命周期共有幾個(gè)階段？分別是什么？2. macos - mac下docker如何設(shè)置代理3. node.js - Angular-webpack-Starter, 怎么把NodeJS添加進(jìn)項(xiàng)目里？4. html5 - vue項(xiàng)目中我用webpack編譯不成功5. javascript - 安裝了babel,不起作用6. html5 - 純CSS怎么做出這種一模一樣的導(dǎo)航條導(dǎo)航塊那里還有個(gè)下拉菜單，請大家指導(dǎo)一下7. index.php錯(cuò)誤，求指點(diǎn)8. 微信公眾號在線生成二維碼帶參數(shù)怎么搞？9. 微信開放平臺 - android 微信支付后點(diǎn)完成按鈕，后回調(diào)打開第三方頁面，屏幕閃動(dòng)，求解決方法10. 視頻 - html5 video的autoplay 在智能手機(jī)上不運(yùn)作？
網(wǎng)公網(wǎng)安備