【css】导航栏小结(一)-----简单导航

导航栏=链接列表

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

1).垂直导航栏
只需要设置<a> 元素的样式，就可以建议一个垂直导航栏。
注意请务必指定 <a>元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。
css:

<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a:link,a:visited
{
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}
</style>

激活/当前导航条实例
在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

.active {
    background-color: #4CAF50;
    color: white;
}

html:

<ul>
<li><a href="#home" class="active ">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

2).水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接具有相同的大小，你必须使用浮动的方法。

2.1 使用内联
css:

ul
{
    list-style-type:none;
    margin:0;
    padding:0 6px; /*注意:如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距*/
}
li
{
    display:inline;
}
a:link,a:visited
{
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}

html:

<!--li不换行则无边距缝隙，换行了就有。因为是内联元素，设置了dispaly:inline具有文字属性的缘故-->
<ul> 
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

2.2 使用浮动 —— 正文内容注意清除浮动
css:

        <style>
            ul {
                list-style-type: none;
                /**注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出。.**/    
                overflow: hidden;
            }

            li {
                   /**注意: 如果 !DOCTYPE 没有定义, floating 可以产生意想不到的结果.**/   
                float: left;
            }

            a {
                display: block;
                width: 100px;
                font-weight: bold;
                color: #FFFFFF;
                /**背景颜色添加到链接中显示链接的区域。整个链接区域是可点击的,不仅仅是文本。**/
                background-color:#98bf21;
                text-align: center;
                padding:6px;
                text-decoration: none;
                text-transform: uppercase;
            }

            a:hover,
            a:active {
                background-color: #7A991A;
            }
        </style>

html:

        <ul>
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#news">News</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
            <li style="float:right">
                 <a class="active" href="#about">关于</a>
            </li>
        </ul>

3).全屏高度的固定导航条 ：一个左边是全屏高度的固定导航条，右边是可滚动的内容

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;/**设置宽度：便于fixed定位**/
    background-color: #f1f1f1;
    position: fixed;/**固定左侧：fixed定位**/
    height: 100%; /* 全屏高度 */
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}
/**注意这里的写法not(.active)即hover时候不包括active当前li**/
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

固定导航条
可以设置页面的导航条固定在头部或者底部：

position: fixed; 配合top|bottom|left|right 进行定位

/**固定在头部或者脚步**/
ul {
    position: fixed;
    top: 0;   /*bottom: 0;*/
    width: 100%;
}

原文地址：http://www.runoob.com/css/css-navbar.html