二级导航栏与JQuery课堂笔记

二级导航栏代码：

[code]    *{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:

JQuery简介：是一个快速简洁的JavaScript框架，是轻量级js库，具有独特的链式语法和短小清晰的多功能接口，具有高效灵活的css选择器，并且可对css选择器进行扩展。

JQuery特点：快速获取文档元素，提供漂亮的页面动态，创建AJAX无刷新页面，提供对JavaScript结构增强，更该页面内容。

jQuery基本语法: jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式