Question

我试图建立一个简单的网站，但到目前为止我遇到了一些问题。问题是我想要一个带有3个链接的导航栏，它应该是彩色#FFFFFF。

它应该放在我得到左边标题的标题内，右边应该有3个链接应该（以动画方式）到文章。

它应该是这样的：

      <h1>Title</h1>                                About   Price   Contact

                                    Content here

                                    Copyright 2014

到目前为止我的代码：

HTML：

<body>

<div id="container">
    <header>
    <br><br>    
        <h1 style="color:white">Title</h1>  
    </header>

    <nav>
        <a href="#">About</a>
        <a href="#">Price</a>
        <a href="#">Contact</a>
    </nav>

    <div id="content">
        <br>
    <p>Content goes here</p>
    </div>

    <div id="footer">
        <footer>
            <h4 style="color:white">Copyright 2014</h4>
        </footer>
    </div>

</div>
</body>

CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form {
    margin: 0; padding: 0; border: 0;
}

body {
    text-align: center;
}

header {
    height: 130px;
    background: #484848;
    width: 100%;
    position: fixed;
    font-family: Helvetica;

}

nav {



}


#footer {
    height: 400px;
    width: 100%;    
    background: #909090;
    font-family: Helvetica;
    position: auto;

}

#content {
    width: 100%;
    position: relative;
    height: 1500px;
    top: 100px;
    background: #FFFFFF;    
    font-family: Helvetica;
    text-align: center;

}

能告诉我为什么我无法看到我创建的链接吗？页脚中的h4页眉也没有显示; S

Answer 1

您的代码存在的主要问题是您使用position: fixed作为标题，而且您的链接不在此标记之内。因此，您的链接实际上显示在标题后面。如果你把它们放在里面就可以解决问题。

我认为您需要以下内容：http://jsfiddle.net/G5JRK/

Answer 2

我目前在Jsfiddle中发现它的解决方案是将标题的z-index设置为小于0的值。

无法在页脚上看到我的导航栏+文本

2 个答案: