javascript - html <div>嵌套的<p>内容不显示-PHP中文网问答

<!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">
        <p 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>
        </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>

全部回复(3)

三叔2017-06-28 09:25:59 3楼

在你自己写的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的。

赞 +0

添加回复

学习ing2017-06-28 09:25:59 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>
...

淡淡烟草味2017-06-28 09:25:59 1楼

先上一张图：

浏览器打开审查元素，这个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>

效果：