第11课 高级网页元素样式
经常有读者向我们提出关于“Tab面板”制作方法的问题，这当中网页元素在很多网站上都很流行，我们在本课中就来看一看具体如何制作。需要说明的是，Tab面板需要Javascript的配合，如果不了解Javascript，制作Tab面板比较容易的方法就是使用Adobe公司的Spry组件，在Dreamweaver CS3中，包含了这个组件。
此外，本章的图书中，还介绍了伸缩面板和折叠面板的制作方法，在视频课程没有深入讲解，如果希望了解的读者可以进一步在《CSS设计彻底研究》图书中深入学习！
本节课时长22分17秒，下载文件50.1兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
以下为本课的讲义，供大家参考。
 |
 |
 |
 |
 |
Many thanks for getting some time to discuss this, I feel strongly about it and adore understanding much more with this topic. If doable, as you acquire expertise, can you mind updating your blog with far more info? It鈥檚 extremely helpful to me come to think of that , i never considered it in that way before.
老师 不明白 不明白 明明是水平选项卡 为什么用VTabbedPanels
我从书里也没有找到相关问题的讲解。盘尽快回复啊！！！
在网页中加了两个 Tab面板，想设置两种不同的Tab样式，该如何做呀？
我试着改了改，但是好像是js不认了，没有动作效果了。
希望温老师指点啊！
老师你好，我是做前台设计的，但由于刚毕业，需要学习好多东西，听说这里学习很好，我看了看确实不错。
所以以后成你为师了，望多多指教。
学习一下~
老师您好，请问在本课中，为什么span 标记的padding 上方向的设置为7px，图片的红色底线才和内容的上边框重合，上方向的padding不应该指的是文字离span顶部的距离吗？
您好！ 我想问一下折叠菜单中的鼠标效果改怎么谢呀！onmouseover=”?” 谢谢
求教，
你可以用CSS看来设置吧？找对选择器以后，用cursor属性即可。
现在急需dw cs3 spry的知识，能讲一下吗？
求学，
看一下本课的视频，可能会对您有帮助！
你好，我照着教程做了一次TAB面板，我做出来以后有两个小问题，请教一下解决方法？
1）TAB面板的上面三个标签有边框
2）标签和下面的内容框之间有一点间距
谢谢！
wj，
没有看到页面，我也说不清楚问题出在哪里。总体来说，应该就是没有调整好吧，做CSS就是需要很细致，一个像素也不能差，需要耐心慢慢调。
你们有邮箱或者QQ吗？我把图片给你们看看，帮我看看哪里的问题，实在找不出
您好，我按照要求添加了鼠标经过的属性 onmouseover=”TabbedPanelsl.showpanel(0)”但是都没有效果.您能否共享出来该教程的html和js吗？我在这里先万分感谢了
xiaogui32 ，
这里的js文件都是spry自己生成的。可能是你拼错了，应该是“TabbedPanels1.showPanel(0)”，你错了两个字母。
如果您就是为了做这么一个例子，这样就差不多了，如果希望深入掌握，还是建议您买一本书，学习效率会更高一些。
您好,关于这课里面的JS文件您能否提供给我们参考..制作鼠标经过切换必须运用滚动条事件.但是SJ里面的我不会改.希望您能提供下。我学习
xiaogui32，
这里面的Js文件都是 Dreamweaver CS3 自己生成的，你安装了 Dreamweaver CS3 以后，就有了，不需要自己编写任何Js程序。
试读的，为什么我下载后，打不开呢？？？我用超星打开，但是里面没有内容啊 提示未命名图书？？
雨中无伞，
这是PDF格式，用Acrobat Reader软件打开即可。你用百度搜索一下“Acrobat Reader”下载的地方非常多，这个是免费的，6.0以上版本就可以看这个文档了。
温老师您好！
关于“高级网页元素样式”这一课的内容，有个问题想问下。
课程中，您用Dreamweaver CS3生成并修改，做了一个Tab面板，但我做出来后，在ie6，Firefox显示都正常，但在ie7里却因为浏览器限制了脚本而不能正确显示，如果一般用户浏览器都默认限制脚本，那我做出来的东西不就没用了吗。由于我对JS脚本不太了解，所以不知道应该怎么调试！困惑中~~~~
还有，我做过一个css二级菜单，也需要外链JS文件，但是在ie7里却能正确连接，不知道为什么，期盼老师指导！！
小菜，
你说的IE 7限制Javascript脚本运行，应该只是你在本地预览的时候才会限制，上传到服务器以后就不会有问题了，应该不会影响最终浏览者的访问。
用纯CSS的二级菜单时完全可以的，也就是不依赖于任何Javascript文件。至于具体Javascript如何使用，就不是简单几句话可以说清的了，现在也有一些书籍可以参考，如果对你的工作有用，你可以花一些时间，认真学习一下，很多东西从基础认真学一下，自然就迎刃而解了。
希望我的回答对你有所帮助！
谢谢温老师的解答，我还想问个问题，就以这个问题为延伸，结合第8课–水平菜单的最后一个事例“会跳起的多彩菜单”我想实现当前选中为跳起，研究了好久都没能实现，有两结果，一个就是您在教程里说的会往下顶，另一个设置了“垫子”，虽然不回往下顶，但所有不是当前选中的都跳起来了，由于里面还是涉及JS脚本，不懂怎么调试，或者是我对垫子的概念没理解清楚，导致没设置正确~~~希望老师能出更多关于JS脚本的书籍或学习资料，以前看过很多css方面的书籍，不过直到现在，好象只有您出的教程我才看的懂~~~~~~期盼回复！谢谢！
我们这个例子没有用Javascript，完全是用CSS实现的，这里说的“垫子”就是一个CSS盒子，在hover状态改变盒子的高度，菜单项就会跳起来了，否则会向下顶。
BTW，抱歉，我编辑了一下您的名字，主要是不希望给其他人广告的印象，希望你不介意。
不会~~~~~我是想问怎么在Tab菜单里实现当前选中跳起？
这就很简单了，后代选择器，让这个垫子作为 :hover的后代即可，基本代码如下。
通常状态：
a.yourTab .yourPad{ height:10px }
a.yourTab p{height:20px}
鼠标经过时：
a.yourTab:hover .yourPad{ height:0px }
a.yourTab:hover p{height:30px}
两种状态，二者加起来都是30px，通常状态pad是10px，p是20px，鼠标经过时，pad为0px，p变成30px，即跳起10px。
好！最后一个问题~~~怎么给当前选中的Tab里的div垫子放气，让它的高度变为0，怎么定这个选择器？
恩，跳起来起来的方法就是在每一个Tab的上面先放一个div，并给这个div设定一定的高度比如10px，然后到鼠标移动至某个Tab的时候，把这个高度变为0，同时使Tab本身的高度增加10px，这样这个Tab就跳起来了，可能简单这么说你还不太容易理解，等我有时间做一个详细的教程放上来吧。