经典导航栏按钮代码

本示例为精简导航栏代码。

技术点概要及扩展：

1.关于<a>标签的属性link、visited、focus、hover、active区别。

    :link代表为访问链接的样式

    :visited  链接访问后的样式

    :focus  获取焦点时的样式

    :hover  光标经过某一元素时的样式

    :active 链接点击被激活后的样式

    

 注意： :  link  与  :visited  在样式文件中的顺序可以随便放置。

而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，原因是结合每个属性的意思，其动作有先后之分，顺序颠倒会导致样式被覆盖。

:focus -> :hover -> :activ

 

2.关于css样式中“>”、"+"符号的含义。

①A>B，表示选择A元素的所有子元素B，只选择一代不能隔代。

         A  B，表示选择A元素的所有后代元素B。   

  另外，没有<的用法。

 ②+： A+B，表示紧随A的B元素。

3.菜单框架都是<ul><li></li></ul>的组合，样式细节解释可参照：

CSS实例:超酷的网站导航按钮

主页面index.html代码如下：

<link rel="stylesheet" href="css/style.css" type="text/css"  media="screen">

<div class="example">
    <ul id="nav">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a class="fly" href="#">page1</a>
            <ul class="dd">
                <li><a href="#">page1-1</a></li>
                <li><a class="fly" href="#">page1-2</a>
                    <ul>
                        <li><a href="#">page1-1-1</a></li>
                        <li><a href="#">page1-1-2</a></li>
                    </ul>
                </li>
                <li><a href="#">page1-3</a></li>
                <li><a href="#">page1-4</a></li>
                <li><a href="#">page1-5</a></li>
                <li><a href="#">page1-6</a></li>
            </ul>
        </li>
        <li><a class="fly" href="#">page2</a>
            <ul class="dd">
                <li><a class="fly" href="#">page2-1</a>
                    <ul>
                        <li><a href="#">page2-1-1</a></li>
                        <li><a href="#">page2-1-2</a></li>
                        <li><a class="fly" href="#">page2-1-3</a>
                            <ul>
                                <li><a href="#">page2-1-3-1</a></li>
                                <li><a href="#">page2-1-3-2</a></li>
                                <li><a href="#">page2-1-3-3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Ajax</a></li>
                    </ul>
                </li>
                <li><a class="fly" href="#">page2-2</a>
                    <ul>
                        <li><a href="#">page2-2-1</a></li>
                        <li><a href="#">page2-2-2</a></li>
                        <li><a href="#">page2-2-3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">page3</a></li>
        <li><a href="#">page4</a></li>
    </ul>
</div>

样式 style.css代码如下：

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    background:#fff url(../images/tech.jpg);
    width:770px;
    height:570px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


/* menu styles */
#nav,#nav ul {
    background-image:url(../images/tr75.png);
    list-style:none;
    margin:0;
    padding:0;
}
#nav {
    height:41px;
    padding-left:5px;
    padding-top:5px;
    position:relative;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:37px;
    width:auto;
}
#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}
#nav li {
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    background:#c1c1bf;
    color:#000;
    display:block;
    float:left;
    font-size:16px;
    padding:8px 10px;
    text-decoration:none;
}
#nav > li > a {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -o-border-radius:6px;
    border-radius:6px;
    overflow:hidden;
}
#nav li a.fly {
    background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
    padding-right:15px;
}
#nav ul li {
    margin:0;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color:#858180;
    color:#fff;
}

/*focus styles*/
#nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;
}