jquery实战第三讲横向纵向菜单_W

1、 绚丽效果教你做之JQuery实战 菜单效果 ITCAST签约讲师王兴魁 ITCAST版权所有 JQuery实战z本次课程实例展示 Page 10 ITCAST版权所有z请大家注意，由于录制软件本身的问题，视频中无法看到鼠标的手型效果 ，且鼠标的位置稍微有偏差。课程中提到的浏览器兼容问题大家可以在自己的本地用不同的浏览器来测试对比 z本节学到的JQuery及其他开发知识： z1.页面中的菜单项可以通过嵌套的ul和li来表 示 z2.菜单最外层为ul，一层每个主菜单放在一个 li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单。 z3.浏览器中ul和li元素默认情

2、况下文字前都有 圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。 z4.list-style属性值为none时，可以清除ul和li前 面的小圆点 z本节学到的JQuery及其他开发知识： z5.清除子菜单的缩进值，需要padding和 margin都为0，其中IE6和IE7只有margin也为 0的时候才可以清除缩进值 z6.可以使用background-image来指定一个元 素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，知道填满整个区域 z7.可以使用bakcground-repeat来控制背景图 的重复填充方式。

3、 z本节学到的JQuery及其他开发知识： z8.如果一个元素上同时定义了背景图和背景色 ，那么有背景图的地方是不会显示背景色的 z9.text-decoration属性值为none时，可以取消 文字上的下划线 z10.background-position可以控制背景图的位 置，属性值既可以用数值，也可以用center， left,top这些值来控制横向和纵向的位置。这 个属性的两个值，第一个对应横向，第二个 对应纵向 z11.background-image的值为none表示没有背 景图 z本节学到的JQuery及其他开发知识： z12.background-repeat的值为no-rep

4、eat时， 背景图不会在所在的区域中重复显示。 z13.IE6以外的其他浏览器可以通过设定 display的值为block来让a元素充满所在的区域。对于IE6，则需要设定display为inline- block，同时设定a的宽度。 z14.display的值为none可以用于隐藏元素。 z本节学到的JQuery及其他开发知识： z15. .main a和.main a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点 z16.show,hide方法可以用于显示或隐藏元素， 没有参数时的效果和修改css的display属性效果一样

5、。参数可以是单位为毫秒的数字，或者是slow,normal,fast这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的。 z本节学到的JQuery及其他开发知识： z17.toggle方法更为强大，可以省去我们判断 元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同。 z18.slideDown，slideUp可以实现向下或向上 卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同。 z19.slideToggle和toggle达到的效果类似 z本节学到的JQuery及其他开发知识： z20.DOCTYPE对于JQuery中的动画是有影响 的。没有DOCTYPE定义时，在IE中， JQuery的动画会出现闪烁的糟糕效果。 z21.float的值是left，可以使原本各自位于一行 的