web实训知识点_0326

二级导航栏

用无序列表ul做二级导航栏
css部分：

    *{margin:0;padding:0;}
    #nav{background-color: #a95511;width:600px;height:20px;margin: 0 auto; }
    ul li{list-style: none;float: left;line-height:20px;text-align: center;position: relative;}
    a {text-decoration:none;color: #e59950;padding: 0 10px;width:80px;display:block;  }
    a:hover {background-color: #ff9415;color: #ffe861;}
    ul li ul{position: absolute;top: 20px;left: 0px;}
    ul li ul li{float: none;width:80px;background-color: #e26e1c;margin:1px 0;display: none;}
    ul li ul li a{padding: 0;}
    ul li:hover li{display: block;}

无序列表部分：

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">课程大厅</a>
        <ul>
            <li><a href="#">web网页实战</a></li>
            <li><a href="#">服务端技术</a></li>
            <li><a href="#">python的开发</a></li>
        </ul>
    </li>
    <li><a href="#">学习中心</a>
        <ul>
            <li><a href="#">*</a></li>
            <li><a href="#">**</a></li>
            <li><a href="#">***</a></li>
        </ul>
    </li>
    <li><a href="#">经典案例</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

jQuery的基本语法：

$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

jQuery的特点：

（1）快速获取文档元素
（2）提供漂亮的页面动态效果
（3）创建AJAX无刷新网页

eg：

• $(this).hide() - 隐藏当前元素

• $(“p”).hide() - 隐藏所有段落

• $(".test").hide() - 隐藏所有 class=“test” 的所有元素

• $("#test").hide() - 隐藏所有 id=“test” 的元素