评论: 第11课 高级网页元素样式 http://learning.artech.cn/20071207.research-css-tab-panel.html 学习在前沿！这里是“前沿视频教室”，在这里您可以找到关于各种网页设计/网站开发/Flash动画相关的内容，而且我们都通过视频演示的方式，直观地向您讲解！包括CSS/Javascript/Flash/Dreamweaver/Fireworks/Photoshop等软件的使用和技巧! Sat, 19 May 2012 20:03:37 +0000 http://wordpress.org/?v=2.2 作者: Fredricka Mckay http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-15327 Fredricka Mckay Fri, 09 Sep 2011 05:54:46 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-15327 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. 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.

]]> 作者: 海若 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-14662 海若 Tue, 10 May 2011 04:29:33 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-14662 老师 不明白 不明白 明明是水平选项卡 为什么用VTabbedPanels 老师 不明白 不明白 明明是水平选项卡 为什么用VTabbedPanels

]]> 作者: anna http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-14600 anna Fri, 22 Apr 2011 03:04:08 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-14600 我从书里也没有找到相关问题的讲解。盘尽快回复啊！！！ 我从书里也没有找到相关问题的讲解。盘尽快回复啊！！！

]]> 作者: anna http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-14599 anna Fri, 22 Apr 2011 03:01:06 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-14599 在网页中加了两个 Tab面板，想设置两种不同的Tab样式，该如何做呀？ 我试着改了改，但是好像是js不认了，没有动作效果了。 希望温老师指点啊！ 在网页中加了两个 Tab面板，想设置两种不同的Tab样式，该如何做呀？
我试着改了改，但是好像是js不认了，没有动作效果了。
希望温老师指点啊！

]]> 作者: 美工 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-12924 美工 Tue, 20 Jul 2010 02:18:40 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-12924 老师你好，我是做前台设计的，但由于刚毕业，需要学习好多东西，听说这里学习很好，我看了看确实不错。 所以以后成你为师了，望多多指教。 老师你好，我是做前台设计的，但由于刚毕业，需要学习好多东西，听说这里学习很好，我看了看确实不错。
所以以后成你为师了，望多多指教。

]]> 作者: 我 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-12883 我 Sun, 11 Jul 2010 01:25:36 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-12883 学习一下~ 学习一下~

]]> 作者: 凌空 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-11535 凌空 Fri, 11 Dec 2009 07:41:38 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-11535 老师您好，请问在本课中，为什么span 标记的padding 上方向的设置为7px，图片的红色底线才和内容的上边框重合，上方向的padding不应该指的是文字离span顶部的距离吗？ 老师您好，请问在本课中，为什么span 标记的padding 上方向的设置为7px，图片的红色底线才和内容的上边框重合，上方向的padding不应该指的是文字离span顶部的距离吗？

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-6517 温谦 Fri, 05 Dec 2008 08:02:01 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-6517 求教， 你可以用CSS看来设置吧？找对选择器以后，用cursor属性即可。 求教，

你可以用CSS看来设置吧？找对选择器以后，用cursor属性即可。

]]> 作者: 求教 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-6494 求教 Thu, 04 Dec 2008 07:23:14 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-6494 您好！ 我想问一下折叠菜单中的鼠标效果改怎么谢呀！onmouseover="?" 谢谢 您好！ 我想问一下折叠菜单中的鼠标效果改怎么谢呀！onmouseover=”?” 谢谢

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3588 温谦 Wed, 04 Jun 2008 06:25:24 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3588 求学， 看一下本课的视频，可能会对您有帮助！ 求学，

看一下本课的视频，可能会对您有帮助！

]]> 作者: 求学 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3586 求学 Wed, 04 Jun 2008 06:07:10 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3586 现在急需dw cs3 spry的知识，能讲一下吗？ 现在急需dw cs3 spry的知识，能讲一下吗？

]]> 作者: wj http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3110 wj Mon, 12 May 2008 01:54:10 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3110 你们有邮箱或者QQ吗？我把图片给你们看看，帮我看看哪里的问题，实在找不出 你们有邮箱或者QQ吗？我把图片给你们看看，帮我看看哪里的问题，实在找不出

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3053 温谦 Fri, 09 May 2008 17:56:15 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3053 wj， 没有看到页面，我也说不清楚问题出在哪里。总体来说，应该就是没有调整好吧，做CSS就是需要很细致，一个像素也不能差，需要耐心慢慢调。 wj，

没有看到页面，我也说不清楚问题出在哪里。总体来说，应该就是没有调整好吧，做CSS就是需要很细致，一个像素也不能差，需要耐心慢慢调。

]]> 作者: wj http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3042 wj Fri, 09 May 2008 04:58:45 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-3042 你好，我照着教程做了一次TAB面板，我做出来以后有两个小问题，请教一下解决方法？ 1）TAB面板的上面三个标签有边框 2）标签和下面的内容框之间有一点间距 谢谢！ 你好，我照着教程做了一次TAB面板，我做出来以后有两个小问题，请教一下解决方法？
1）TAB面板的上面三个标签有边框
2）标签和下面的内容框之间有一点间距
谢谢！

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2162 温谦 Fri, 28 Mar 2008 09:31:57 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2162 xiaogui32 ， 这里的js文件都是spry自己生成的。可能是你拼错了，应该是“TabbedPanels1.showPanel(0)”，你错了两个字母。 如果您就是为了做这么一个例子，这样就差不多了，如果希望深入掌握，还是建议您买一本书，学习效率会更高一些。 xiaogui32 ，

这里的js文件都是spry自己生成的。可能是你拼错了，应该是“TabbedPanels1.showPanel(0)”，你错了两个字母。

如果您就是为了做这么一个例子，这样就差不多了，如果希望深入掌握，还是建议您买一本书，学习效率会更高一些。

]]> 作者: xiaogui32 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2161 xiaogui32 Fri, 28 Mar 2008 09:26:10 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2161 您好，我按照要求添加了鼠标经过的属性 onmouseover="TabbedPanelsl.showpanel(0)"但是都没有效果.您能否共享出来该教程的html和js吗？我在这里先万分感谢了 您好，我按照要求添加了鼠标经过的属性 onmouseover=”TabbedPanelsl.showpanel(0)”但是都没有效果.您能否共享出来该教程的html和js吗？我在这里先万分感谢了

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2010 温谦 Fri, 21 Mar 2008 00:59:31 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2010 xiaogui32， 这里面的Js文件都是 Dreamweaver CS3 自己生成的，你安装了 Dreamweaver CS3 以后，就有了，不需要自己编写任何Js程序。 xiaogui32，

这里面的Js文件都是 Dreamweaver CS3 自己生成的，你安装了 Dreamweaver CS3 以后，就有了，不需要自己编写任何Js程序。

]]> 作者: xiaogui32 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2004 xiaogui32 Thu, 20 Mar 2008 17:18:32 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-2004 您好,关于这课里面的JS文件您能否提供给我们参考..制作鼠标经过切换必须运用滚动条事件.但是SJ里面的我不会改.希望您能提供下。我学习 您好,关于这课里面的JS文件您能否提供给我们参考..制作鼠标经过切换必须运用滚动条事件.但是SJ里面的我不会改.希望您能提供下。我学习

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1069 温谦 Sun, 30 Dec 2007 19:02:21 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1069 雨中无伞， 这是PDF格式，用Acrobat Reader软件打开即可。你用百度搜索一下“Acrobat Reader”下载的地方非常多，这个是免费的，6.0以上版本就可以看这个文档了。 雨中无伞，

这是PDF格式，用Acrobat Reader软件打开即可。你用百度搜索一下“Acrobat Reader”下载的地方非常多，这个是免费的，6.0以上版本就可以看这个文档了。

]]> 作者: 雨中无伞 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1068 雨中无伞 Sun, 30 Dec 2007 18:58:06 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1068 试读的，为什么我下载后，打不开呢？？？我用超星打开，但是里面没有内容啊 提示未命名图书？？ 试读的，为什么我下载后，打不开呢？？？我用超星打开，但是里面没有内容啊 提示未命名图书？？

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1066 温谦 Sun, 30 Dec 2007 09:58:35 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1066 这就很简单了，后代选择器，让这个垫子作为 :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。 这就很简单了，后代选择器，让这个垫子作为 :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。

]]> 作者: 小菜（ http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1065 小菜（ Sun, 30 Dec 2007 09:48:27 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1065 好！最后一个问题~~~怎么给当前选中的Tab里的div垫子放气，让它的高度变为0，怎么定这个选择器？ 好！最后一个问题~~~怎么给当前选中的Tab里的div垫子放气，让它的高度变为0，怎么定这个选择器？

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1064 温谦 Sun, 30 Dec 2007 06:43:04 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1064 恩，跳起来起来的方法就是在每一个Tab的上面先放一个div，并给这个div设定一定的高度比如10px，然后到鼠标移动至某个Tab的时候，把这个高度变为0，同时使Tab本身的高度增加10px，这样这个Tab就跳起来了，可能简单这么说你还不太容易理解，等我有时间做一个详细的教程放上来吧。 恩，跳起来起来的方法就是在每一个Tab的上面先放一个div，并给这个div设定一定的高度比如10px，然后到鼠标移动至某个Tab的时候，把这个高度变为0，同时使Tab本身的高度增加10px，这样这个Tab就跳起来了，可能简单这么说你还不太容易理解，等我有时间做一个详细的教程放上来吧。

]]> 作者: 小菜（ http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1063 小菜（ Sat, 29 Dec 2007 14:46:30 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1063 不会~~~~~我是想问怎么在Tab菜单里实现当前选中跳起？ 不会~~~~~我是想问怎么在Tab菜单里实现当前选中跳起？

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1062 温谦 Sat, 29 Dec 2007 12:16:36 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1062 我们这个例子没有用Javascript，完全是用CSS实现的，这里说的“垫子”就是一个CSS盒子，在hover状态改变盒子的高度，菜单项就会跳起来了，否则会向下顶。 BTW，抱歉，我编辑了一下您的名字，主要是不希望给其他人广告的印象，希望你不介意。 我们这个例子没有用Javascript，完全是用CSS实现的，这里说的“垫子”就是一个CSS盒子，在hover状态改变盒子的高度，菜单项就会跳起来了，否则会向下顶。

BTW，抱歉，我编辑了一下您的名字，主要是不希望给其他人广告的印象，希望你不介意。

]]> 作者: 小菜 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1061 小菜 Sat, 29 Dec 2007 12:08:39 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1061 谢谢温老师的解答，我还想问个问题，就以这个问题为延伸，结合第8课--水平菜单的最后一个事例“会跳起的多彩菜单”我想实现当前选中为跳起，研究了好久都没能实现，有两结果，一个就是您在教程里说的会往下顶，另一个设置了“垫子”，虽然不回往下顶，但所有不是当前选中的都跳起来了，由于里面还是涉及JS脚本，不懂怎么调试，或者是我对垫子的概念没理解清楚，导致没设置正确~~~希望老师能出更多关于JS脚本的书籍或学习资料，以前看过很多css方面的书籍，不过直到现在，好象只有您出的教程我才看的懂~~~~~~期盼回复！谢谢！ 谢谢温老师的解答，我还想问个问题，就以这个问题为延伸，结合第8课–水平菜单的最后一个事例“会跳起的多彩菜单”我想实现当前选中为跳起，研究了好久都没能实现，有两结果，一个就是您在教程里说的会往下顶，另一个设置了“垫子”，虽然不回往下顶，但所有不是当前选中的都跳起来了，由于里面还是涉及JS脚本，不懂怎么调试，或者是我对垫子的概念没理解清楚，导致没设置正确~~~希望老师能出更多关于JS脚本的书籍或学习资料，以前看过很多css方面的书籍，不过直到现在，好象只有您出的教程我才看的懂~~~~~~期盼回复！谢谢！

]]> 作者: 温谦 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1056 温谦 Sat, 29 Dec 2007 10:40:45 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1056 小菜， 你说的IE 7限制Javascript脚本运行，应该只是你在本地预览的时候才会限制，上传到服务器以后就不会有问题了，应该不会影响最终浏览者的访问。 用纯CSS的二级菜单时完全可以的，也就是不依赖于任何Javascript文件。至于具体Javascript如何使用，就不是简单几句话可以说清的了，现在也有一些书籍可以参考，如果对你的工作有用，你可以花一些时间，认真学习一下，很多东西从基础认真学一下，自然就迎刃而解了。 希望我的回答对你有所帮助！ 小菜，

你说的IE 7限制Javascript脚本运行，应该只是你在本地预览的时候才会限制，上传到服务器以后就不会有问题了，应该不会影响最终浏览者的访问。

用纯CSS的二级菜单时完全可以的，也就是不依赖于任何Javascript文件。至于具体Javascript如何使用，就不是简单几句话可以说清的了，现在也有一些书籍可以参考，如果对你的工作有用，你可以花一些时间，认真学习一下，很多东西从基础认真学一下，自然就迎刃而解了。

希望我的回答对你有所帮助！

]]> 作者: 小菜 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1050 小菜 Sat, 29 Dec 2007 03:17:13 +0000 http://learning.artech.cn/20071207.research-css-tab-panel.html#comment-1050 温老师您好！ 关于“高级网页元素样式”这一课的内容，有个问题想问下。 课程中，您用Dreamweaver CS3生成并修改，做了一个Tab面板，但我做出来后，在ie6，Firefox显示都正常，但在ie7里却因为浏览器限制了脚本而不能正确显示，如果一般用户浏览器都默认限制脚本，那我做出来的东西不就没用了吗。由于我对JS脚本不太了解，所以不知道应该怎么调试！困惑中~~~~ 还有，我做过一个css二级菜单，也需要外链JS文件，但是在ie7里却能正确连接，不知道为什么，期盼老师指导！！ 温老师您好！
关于“高级网页元素样式”这一课的内容，有个问题想问下。
课程中，您用Dreamweaver CS3生成并修改，做了一个Tab面板，但我做出来后，在ie6，Firefox显示都正常，但在ie7里却因为浏览器限制了脚本而不能正确显示，如果一般用户浏览器都默认限制脚本，那我做出来的东西不就没用了吗。由于我对JS脚本不太了解，所以不知道应该怎么调试！困惑中~~~~
还有，我做过一个css二级菜单，也需要外链JS文件，但是在ie7里却能正确连接，不知道为什么，期盼老师指导！！

]]>