导航栏放置和设计

Question

我从 Webey 看到了这个非常好的设计，它把导航栏集中放置在整个页面和网页顶部。

但是我不知道这个栏是怎么放在网页顶部的如果您能提供任何帮助，我将不胜感激。我没有 post 图片的代表，但我提供了指向我当前拥有的导航栏的链接，以及我在下面用作示例的导航栏。

示例：http://i.imgur.com/FPwSXNz.png 当前：http://i.imgur.com/yj3NzRr.png

Answer 1

这里有一个如何操作的例子Live demo

HTML :

<div id="fixed">
    My fixed bar
</div>

<div id="targets">
    <div id="target-1">
        <a href="#target-2">Jump to target 2</a>
    </div>
    <div id="target-2">
        <a href="#target-3">Jump to target 3</a>
    </div>
    <div id="target-3">
        <a href="#target-4">Jump to target 4</a>
    </div>
    <div id="target-4">
        <a href="#target-5">Jump to target 5</a>
    </div>
    <div id="target-5">
        <a href="#target-1">Jump to target 1</a>
    </div>
</div>

CSS :

body {
    padding:0;
    margin:50px 0 0;
    font-family:"Arial";
    font-size:1em;
}
a { color:#333; }

#fixed { 
    position:fixed;
    height:50px;
    line-height:50px;
    vertical-align:middle;    
    background:#000;
    top:0;
    left:0;
    right:0;
    color:#FFF;
    padding-left:5px;
}
#targets div {
    height:400px;
    padding-left:5px;
}

#target-1 { background:#888; }
#target-2 { background:#999; }
#target-3 { background:#AAA; }
#target-4 { background:#BBB; }
#target-5 { background:#CCC; }

另一个基于 position: fixed 的导航栏 --> Live Demo

导航栏放置和设计

Navigation bar placement and design

html

css

nav