Web网页实训知识点——0319

导航栏（变换菜单，多级菜单）
JS框架，简单易用，代码量少
JS10行=jQuery2行.
插入代码段：

1.div实现：

*{
    margin: 0;
padding: 0;
}


#top{
    padding: 10px 10px 0;
    font-size: 10px;
    font-weight: bold;
    border-bottom: 5px solid #DC411B;
    float: left;
    margin: 0 0 0 5px;
}/*下划线的大小方向颜色*/
.top_nav{
    width: 80px;
    height: 20px;
    background-color: #dda10c;
    float: left;
    padding: 10px 10px 0;
    text-align: center;
    margin-right: 3px;/*两个nav的距离*/
    line-height: 10px;
    overflow: hidden;
}/*设置宽度高度背景颜色
.top_nav a{
    text-decoration: none;
    color: black;
    line-height: 20px;
    text-align: center;
    z-index: 0;
}/*链接内容显示的格式*/
a:hover{
    color: #FFFFFF;
    text-decoration: underline;
}/*鼠标点击时内容变为白色*/
.top_nav a span{
    display:block;/*把整个链接区域分为块元素点击*/
}
.top_nav a span{
    position: absolute;
    visibility: hidden;

}
.top_nav a:hover span{
    visibility: visible;
}

首页Home

课堂大厅Course

学习中心Learn

关于我们About

2.ul li 实现：

    a {
        color: #2e9fff;text-decoration: none;
    }
    a:hover{
        color:#9f8d77;text-decoration: underline;
    }
    .top-nav{
        padding: 10px 10px 0;
        font-size: 12px;
        font-weight: bold;
        margin: 1px 0 0 0 ;
        list-style: none;
        border-bottom: 8px solid #DC4E1B;
        overflow: hidden;
        background-color: #33b5e5;
    }
    .top-nav li{
        float: left;margin-right: 1px;
        color:#666666;display: block;width: 80px;text-align: center;
    }
    .top-nav li a span{
        position: absolute;visibility: hidden;
    }
    .top-nav li a:hover span{
        line-height: 20px;text-decoration: none;background: #DDDDDD;
        display: block;width: 80px;text-align: center;
    }

• 首页Home
• 课堂大厅Course
• 学习中心Learn
• 关于我们About