Question

我从Webey看到了这个非常好的设计，它将导航栏集中在一起，在整个页面和网页顶部进行平移。

但是我无法弄清楚这个栏是如何放在网页的顶部的我非常感谢您提供的任何帮助。我没有代表发布图片，但我提供了我目前拥有的导航栏的链接，以及我在下面使用的导航栏作为示例。

示例：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 - ＆gt;的 Live Demo

导航栏放置和设计

1 个答案: