消息关闭
    暂无新消息!
<!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>

3个回答

︿ 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的。

︿ 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>

效果:

︿ 0

看到.navbar-fixed-top的position是fixed,所以<main>元素感知不到其存在被排到页面最上面,被.navbar-fixed-top遮盖掉了。

你可以把<header class="navbar navbar-inverse navbar-fixed-top">用一个<div>包裹起来,将这个div的height设置成和<header>的height一致,从而把下面的<main>元素挤下去。

...
<div style="height: 51px;">
    <header class="navbar navbar-inverse navbar-fixed-top">
        ...
    </header>
</div>
...