第8课 水平菜单
有了前面竖直菜单的基础,本节课中演示几个水平菜单的效果。这里面特别重要的是“滑动门技术”的应用。滑动门这个技术,可以应用在很多地方,因此建议读者深入地理解和研究清楚。
本节课时长15分13秒,下载文件23.6兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() 了解详细说明 |
有了前面竖直菜单的基础,本节课中演示几个水平菜单的效果。这里面特别重要的是“滑动门技术”的应用。滑动门这个技术,可以应用在很多地方,因此建议读者深入地理解和研究清楚。
本节课时长15分13秒,下载文件23.6兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
这篇文章发表于 2007年12月04日 星期二 7:00 am,并被分类于CSS导航设计。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论,或者在您自己的网站中引用 (Trackback) 它。
前沿视频教室的内容版权属于北京前沿科技,http://www.artech.cn。Copyright 2006-2011
本网站使用了 WordPress
2.2
中文版 。










[…] 第6 课 链接与导航 第 7课 竖直菜单(上) 第 7课 竖直菜单(下) 第 8课 水平菜单 第 9课 […]
老师好,自适应的斜角水平菜单设置的span我设置border:4px solid #F00; border-top-color: #FFF; border-left-color: #FFF; 然后显示视频中的效果但是视频中你的代码是border-bottom:solid 6px #C00; boder-left: solid 6px #FFF不清楚这是为什么,还有当鼠标放上去a:hover中的span背景色应该改成和a的背景色一致才对啊但是我看你的代码中这块好型不用,为什么呢
那个“会跳起的多彩菜单”怎么做不出多彩的效果呢,教程里源太码也没有出来效果?为什么啊老师?
怎么没有回复,时间过了好久了
大熊,
你好,以前有读者问过这个问题,我记得是因为光盘中的案例的HTML代码 有一个地方没有严格写对,改过来即可,等我有时间再仔细查一下。
8.23设置斜角的效果,为什么我在IE7和火狐下均没有显示效果,代码如下
div{
position:absolute;
height:0;
width:0;
overflow:hidden
border-style:solid;
border-width:60px;
border-color:#ccc #999 #666 #333;
}
我的也是,我把
height:0;
width:0;
变为:
height:6px;
width:6px;就显示出来了,但在IE6、opera中,完全没有显示,没有办法,如果都兼容还是用图片好了。。
峰峰,
这个在Firefox里面肯定没问题的,你看上面的讲义中的第三个图,用的就是firfox浏览器,也用到了这个特性。
你的问题具体原因是什么,你可以到我们的论坛发个帖子,仔细参考:
http://talking.artech.cn/thread-178-1-1.html
版本Firefox 3.5啊!不行啊!什么都没显示
老师啊!就是那个:8.2.3,这里先介绍一下斜角的产生方法。假设有如下一个简单的完整网页
等等….
这个页面在IE和Firefox中的效果分别如图8.7左图和图8.7右图所示,可是我在IE和火狐下都不显示呢??
我觉得还是得讲解制作过程具体点才看得懂,而不是用分析的方式,那样总是会不理解的,必竟一般看教程的都是生手,看不懂的
小小年纪 ,
你说的对,我们这套视频主要是给图书作为补充的,并不是非常详细。
其实这个问题的关键不在于我们做不出来更详细的,而是目前没时间做,实话实说的原因在于我们的主要精力还得做项目挣钱~~
今年下半年等到我们的项目少一些,我们会做一品新的更好的教程的,如果不打算考这个盈利,我们也只能业余时间做一些,包括回答问题等等。
温老师你好!我又来了。
这课中,最后2个样式,用纯CSS代码制作圆角菜单。
我设置空DIV后,无论怎么样也不能让它们和链接叠加在一块,显示圆角。
做了好多遍也想不出来怎么做成。
我看的是视频,老师制作的视频上没显示那点的代码设置。
温老师你能把代码贴出来吗?论坛上,或者直接发到我信箱可以吗?
信箱:zhenjiang5613@yahoo.cn
最后2个样式的代码,我先谢谢温老师。
对了,温老师你的信箱是多少?我有不会的可以直接给你发邮件。
娃娃,
这本书是我前年写的了,现在细节也记不太清楚了,总之原理就是先把圆角用border凑出来,然后你说的链接是指菜单里的文字吗?如果是指的文字,那么不存在叠加的问题,写在最下面的那个div或者盒子里就可以了。
如果是效果对不齐的话,需要慢慢调试,可以参考下面文章:
http://learning.artech.cn/20080129.css-debug-skills.html
温老师你好!
这上面中的第二个案例,就是水平菜单左上为斜角。
我有点不明白,就是绝对定位的时候,定位左上为0(这点我明白),但是设置它边框颜色的时候,我看视频上设置为左边框为白,“下边框为红”,主要不明白的就是这,为什么直接设置下边框为红,就能显示正确,我把设置该为别的就不行,设置背景更不行,能给我说下这点的原理吗?
如果说我对定位原理那点不明白,我个人感觉不会。relative:以自身当前原始位置为标准,进行偏移(则为移动)如right:0,top:0,从右上向左下进行偏移;absolute:以包含它的盒子(及包含框)为准。这点我是这样理解的,不知道对原理到底还是不清楚吗。
还有,我把样式改为显示左下斜角或右下斜角的时候,发现左下斜角底部那点显示出了一条红线,我仔细做了几遍,依然如此。并且,我还按老师的原码抄上去,只改动了下显示为左下斜角,还是会有。我想了好久应该不会是浏览器器的问题,因为我用的就是IETester。老师能给我说下为什么吗?
不知道现在提出问题,老师还会不会注意到。
祝老师天天开心。
娃娃,
抱歉我没有十分理解您的具体意思,你再把你的问题条理清晰地描述好,发到我们的论坛上吧,我在给你看一看:
http://talking.artech.cn/thread-178-1-1.html
这些代码在IE6不起任何作用呢~~网上说IE6除了a标签能用hover 其他的 例如span b之后的都用不了hover啊
水平导航滑动门第一例就是用当钩子的 IE6的hover只能用a标签
曼联,
请先参考这篇文章:http://talking.artech.cn/thread-178-1-1.html
然后再到论坛发帖,那里讨论比较容易。这里讨论代码不方便。
温老师 我又来了~~看了之后的课了 都很清晰 关于第八章滑动门第一课时 我就想 能不能解决IE6无A标签不能hover的问题~~我的学校都用IE6 我回去实践发现竖直导航条有个指上去弹出菜单和水平斜角的都做不出来~~回家查好像是IE6问题 请问有解决吗?是不是一定要用脚本了?
曼联,
我没有理解你说的具体是什么意思,如果你可以把你有问题的代码贴到我们的论坛,我可以帮你看看。
原则上来说,对于很简单的内容,一般可以不用JS,也可以把IE6的兼容靠CSS实现,过于复杂的,最好还是用JS,简单得多。
好喜欢温谦老师你的讲解呀,我一口气看完了前8课的内容。清晰明了,以前好多没弄懂的地方一下子就明白了是怎么回事,真是太谢谢你了。
您的书出来了没有呀?哪里有的卖,我想去买一本。
另外能不能把你的例子代码也发给我一下,我想动手实践一哈 :)
ywj,
非常高兴您喜欢我们的内容,给我们很大的鼓励哦!
关于图书,已经出版了,请参考:
http://learning.artech.cn/20070802.css-div-buy-book-online.html
关于案例代码,书中光盘都有,由于合出版社有合约,目前不方便提供下载,如果喜欢,看看我们的书吧,谢谢:)
圆角的好难,理解不了,跳过了,可是后面还都是以这个为例子,唉…
小小,
学习任何东西,都有一些难关要过的,坚持过去了,就过去了,中间放弃了,也就放弃了。
我认为实际工作总用纯css实现圆角 不实用 。。
形象一点的比喻:用Css做了一大堆的机关 , 最后实现的效果也不怎样 。。并且结构代码增加了好多。。不符合标准的思想 。。 用来练习可以 。。
鹤庭逸,
这个我的观点和你不太一样,我觉得圆角框用CSS实现还是可以胜任的,也不是很复杂。实际上有很多简单的实现圆角框的方法,非常实用的。
很多非常大的网站,比如Apple这样的网站,圆角框也都是用CSS来做的,这里面不存在什么特殊的问题。
如果不用CSS,用JSt吗?用JS本质和用CSS是一样的,而且效率低得多。
这个和做菜单不一样,菜单存在比较复杂的交互,用CSS确实比较困难,而且一个页面菜单就一两个,用JS也不会明显降低效率;二一个页面可能有很多很多圆角框,如果都用通过JS来设置,效率会有问题的。
个人意见,仅供参考。
老师 有个问题我想和你仔细的交流一下。。。不知道你有没有QQ。。。
我想了很久了。。。
鹤庭逸,
抱歉,我不上QQ,你直接给我发邮件吧 support [at] artech [dot] cn ,把你的想法讲清楚即可。
看来我是 班门弄斧 了,别无他意。。 不好意思,我一般都是做菜单或者圆角矩形 呵呵 都是用图像来实现的。。多谢老师的指正。。
鹤庭逸,
我理解你的意思了,你说的CSS制作圆角框的意思是不用图像,单纯是用div拼出来的那种方式吧?
那个方法当然并不常用,主要是演示一下而已。
我说的CSS座圆角框的意思,是用CSS配合图像制作的,我以为你说的不用CSS而是去用JS来实现。
我可能理解错你的意思了。
是的 老师 如果用书上说的 div 来堆出圆角 我实在觉得这方法过于麻烦 效果也不好。。可能也是我没表达清楚。。
鹤庭逸,
你太客气了,咱们多交流哦~~
我买了一本CSS设计彻底研究,可是光盘不少心掉了.视濒倒是网上能看到.想叫你把例子代码发过来.书上一个个打上去太辛苦了.
可可,
查收你的信箱。
很好的教程,但是好像有兼容问题,如:自适应斜角水平菜单,在firefox中显示是正常的,但是在遨游中斜角没有正常显示。
新手 ,
我们的案例都是在Firefox、IE 6 和IE 7三种浏览器上测试过的。
其他的浏览器没有测试过,如果你能理解了代码的原理,自己应该稍作修改就可以适应于其他的浏览器。例如,如果斜角没有正常显示,我估计是对绝对定位的解释有所不同,自己看一下局对定位的部分的代码,可能就可以了。
浏览器的种类数不胜数,不可能所有浏览器都保证万无一失,那样的工作量就太大了。
另外,制作网页的目的不是给自己看,而是给别人看,所以要更多地考虑访问者用那种浏览器的比较多,要优先考虑。
老师:
我今天下午的问题总结来说就是,鼠标经过图片,图片切换到另一张图片的效果是否能用CSS制作呢??因为我做的网页的导航条完全是用图片来做的,当鼠标经过时,导航按钮图片就切换到另一个按钮图片。导航按钮没有文字部分!谢谢!
frankfang,
我做了一个简单的文字教程,你看看能否解决你的问题,请看文章:《回答读者提问——最简单的CSS图片翻转效果》:
http://learning.artech.cn/20071227.css-image-roll-over.html
我全都好喜欢,谢谢
sss,
好啊,喜欢的话,您就常来看看哦~~