用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课
本节课时长10分46秒，下载文件9.98兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本课围绕菜单的制作，介绍相关的项目列表、菜单变幻、导航栏等的内容。
1. 项目列表
传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的 ol 标记，无顺序列表 ul 标记等等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了最初设计时它的功能。我们在这里主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进、位置等等。希望大家能够掌握以下几个方面的内容：
- 列表的符号
- 图片符号
2. 无需表格的菜单
当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。
3. 菜单的横竖转换
导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过CSS属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如图所示。
4. 菜单实例一：百度导航条
打开搜索引擎百度的网站，可以看到logo下方的水平导航条。利用本课前面几节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的制作，模拟该效果。
5. 菜单实例二：流行的Tab菜单
Tab风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的Tab菜单，图中显示的就是一个Tab菜单。我们在这里通过对导航菜单CSS属性的进一步控制，实现Tab菜单的效果。
46,728
这个不错，主流的方法css/div
对于此教程，觉得很不错，我在工作中也用的Div+Css，我还得写后台哦… 可怜。但是讨厌浏览器兼容，特别讨厌ie6。每次都要测试很久。
老师讲的非常好！ 我看过不少的教程，还是觉得这里的最好！……
终于找到了自己想要的东西了~~~所以决定长住下来.对于哪个制作TAB导航栏很晕呼。当鼠标点上去就切换哪块到底是怎样实现的。是仅仅靠css还是有js，究竟怎么过实现法，想老师给点详细讲解。小鱼在此万分感激！！！！！
我在努力学习如何建网页，学在其中！！！？？
yg22.com
很好，很受用
童话故事 ，
谢谢您的鼓励！欢迎常来这里交流！
我看了你的童话网站，做得非常不错，加油！
TAB菜单是在一个人页面中的，竟然做了多个页面，我晕死哦
hello，
要实现真正的Tab面板，只靠CSS是不够的，我们后来也都讲了，
请参考：
http://learning.artech.cn/20071207.research-css-tab-panel.html
抱歉没有及时回复，我们最近很忙，下半年我们会拿出更多时间增加新内容的，欢迎来交流！
好
小孔，
欢迎常来这里交流！我们最近很忙，抱歉没有及时回复，下半年我们会拿出更多时间增加新内容的，欢迎来交流！
看到温老师的文章和成果 真为我们的未来感到高兴
但是我是应届生 工作真的太不找了 看到你的技术文章
才知道我们在学校里面学的编程真的不够 希望温老师
能为我们这些正在徘徊的迷失着 点明一盏明亮的灯光
如果能有温老师这么好的技术 工作找的到肯定没的说
但是事不人愿啊 你出的书正是我们所需要的啊
zphck，
其实大学里学的东西还是非常非常重要的，它是决定你未来能飞多多高的重要因素。大学里讲的都是真正的“原理”，这个比一些具体的技术重要得多。
很多数学系的学生做软件都做得非常好，比计算机系的还好，就是因为基础好。
所以，一定要把基础和具体的技术二者结合起来，才能达到最好的效果。
我是精通CSS+DIV的读者，在书上看到你们的网址，视频很不错！
小雅天空 ，
谢谢您的鼓励，欢迎常来这里交流！
谢谢你们的视频
jenny，
谢谢您的鼓励，欢迎常来这里交流！
你好，我是一新手，请教一问题：
我DREAMWEAVER CS3中用DIV+css，在一页上分别做了上、中、下三个DIV，然后在上DIV中插入了“MENU”DIV，然后在MENU中做了UL/LI一菜单，并做了相对定位。问题是，我在DREAMWEAVER编辑窗口看到的UL/LI菜单显示的位置，与浏览器预览中的显示的位置，总是不一样，编辑窗口中好容易排好版了，一预览就不在同一位置了，这是为什么呢？如何解决呢？
谢谢！
gada ，
不要管DW中的预览窗口，那个都是乱的。一定要用实际的浏览器看效果，以实际的浏览器为准。
啊，原来是这样，白忙一大通了！
实际的浏览器是编辑窗口的显示吗？
保存HTML后，再用IE打开的那个浏览器中的效果，是准的吗？
太谢谢了！
“一定要用实际的浏览器看效果”中的实际浏览器是什么呢？请讲多一点吧，我是新手啊！
另，我用的XP HOME上安装的DW，还用不用装IIS之类的WEB服务器呢？
谢谢！
gada，
浏览器就是IE、Firefox这些。
你的基础太少了，建议你买一本书：
http://www.amazon.cn/detail/product.asp?prodid=bkbk808203&source=artech
里面讲的很全面，相信会对您有所帮助！
生是做网站的人。死是做网站的鬼。我的网站什么时候才有你网站的那么成功啊。羡慕中~~~
做鬼的话一起,有个伴,不寂寞~.~!
我把视频下走了哦
jane，
没问题，欢迎常来这里交流~~
我看过了，好像很罗嗦，还有动作也不快点，慢吞吞的，不过还好啦。至少看得很容易懂。以后建议动作快点，不然我一直在那快进。呵呵
jane，
呵呵，您觉得罗嗦，说明您的理解力很棒啊。
每个人的基础和接受能力相差很大，不过我们要以大多数人为对象来讲解，所以还是要详细一些。
欢迎您常来这里交流阿！
老师，你好，有个问题想请教
在”CSS+DIV”这本书中，第八章的实例“流行的TAB菜单”的代码好像不完整的，例如在点击“博客”菜单项，是如何出现相应的具体内容的呢，是否涉及JAVASCRIPT的知识呢，能否把完整的代码发给我呢
珠海，
那个案例不是真正的Tab面板，是通过多个页面实现的。
如果要制作真正的不刷新页面的Tab面板，最方便的是使用Dreamweaver CS3中的spry，或者其它的JS框架。
可以参考 http://learning.artech.cn/category/css-research/css-advanced-design 的第12 课。
棒极了！讲的很好啊，只是我现在还对margin,padding晕乎乎的
holahola ，
谢谢您的鼓励，欢迎常来这里交流！也欢迎到我们的论坛发言： http://talking.artech.cn 。
关于CSS的基础，建议你一定要真正搞懂，否则实际做的时候，会遇到很多麻烦，所以先把基础掌握扎实很重要！
怎么下得这么慢啊。有什么快的方法吗？
笨笨，
可能是您那里的网络问题，待会再试试看吧？
我这里用的是北京网通ADSL，可以100多K字节/秒，非常快。
真好的教程,说的简单明了,没有一句多佘的话, 我就喜欢这样的老师这样的教材,不过第五讲不能完全播放.不是网络问题.
王磊，
谢谢你的鼓励！我们会为大家尽力提供更多的内容。
您说的这可下载有问题，我试验了一下，因该是没有问题的，您再试试看，清除一下浏览器的缓存试试看？
我把A：hover标记的上填充设为4，下填充设为4，但在IE浏览器中，上填充基本没有，下填充倒是正常，这是什么原因，就象你这个网站最上面一行导航条一样，“教室首页”读者留言，明显的上填充比下填充小，怎么样把他们设为一样宽 啊。
还有，我现在学CSS越学越糊涂了，CSS的优先级是行内式>内嵌式》链接式，但还有个优先级是行内式》ID选择器》类选择器》标记选择器，那要是在链接式的CSS文件中定义一个ID选择器，在内嵌式的CSS中定义一个类选择器，那么这两个选择器的优先级又是谁高呢?
1：这是因为a是行内容元素， 你把a元素用display:block设置为块级元素之后，就可以正常设置padding等属性了。
2：这个原则很复杂，建议你尽量理解，如果实在搞不清，也不用过于深究。如果需要，就试验试验，你平常作的都是一些很简单的网页，不会影响你实际工作。等到你真的需要这么复杂的项目的时候，你就肯定能搞清了。不过要说明的是，“优先级是行内式>内嵌式>链接式”这个说法严格说是不正确的，具体很复杂，不是几句话能说清楚的。
对于这些问题，如果有兴趣，可以自己写几行代码，亲自试验一下，比听别人说的理解更深刻。
谢谢，很简单但很使用，也很适合学习
左岸，
你说的正是我们希望达到的效果，我们希望一直坚持这种风格，制作出更多的内容，提供给大家。
能不能把这个视频教程打包下载啊？？？或者发到我的邮箱去好不好？我买了你们的书了，可是光盘不见了，，，，，谢谢啊。。。
如果您不是很着急的话，出版社的人可以给您邮寄一张光盘，我把您的邮件地址转给出版社的责任编辑了，她会和您联系，你告诉他地址就可以了。
如果您不能接收邮寄，您只能从这里下载，或者在线观看了，一共就20个，下再也不会太慢吧。
再次感谢您对我们的支持！希望我们的图书对您有所更大的帮助。
我还是下载吧，邮寄时间太长了。不过感谢你回复的那么及时哦。
你们这个教程有没有原代码哟
这是我见到过的最好的学习网站，让我学到了很多东西！谢谢啊！！！
另外问下有没有和视频想对应的原代码啊，理解起来更方便 ！！
123 怎么弄的静态页面也可以留言吗
111，
这不是静态网站，只是URL静态化了，用Apache可以带有问号的动态地址显示为静态地址。
原来是动态的呀,还用了Ajax技术吧.不知道站长的网站是用什么做的.留言版的风格真的很好.
这个网站是用Wordpress系统搭建的，留言板是用了Ajax的，可以用插件实现，如果你用Wordpress先搭好一个网站，然后我可以告诉你怎么做这样的留言板，很方便。不需要懂很多技术，如果要做好看，把CSS理解好就可以了。
关于Wordpress，可以参考： http://www.wordpress.org.cn/， 这是全世界使用的最多的Blog系统。
PHP的开源软件比.net的多得多。现在几乎任何系统都有开元软件可以直接使用，关键看你的需求是什么。这些系统一般都不需要懂技术，都可以直接使用，在后台管理即可，门槛很低。
谢谢老师的热心回复,我今天才知道还有个Wordpress主要是用来做bolg的吧,不过好像是PHP做的,看不懂源代码,不知道有没有.Net版本.以前只知道Discuz!NT,可以方便的搭建论坛.现在开源软件真的不少了.这是我们菜鸟们的福音呀,不用长时间的开发就能应用.老师能不能在推荐几个比较好的开源软件呀.
ki，你好！
谢谢您的赞扬，我们希望尝试做一个严肃的、正规的学习网站，所有课程内容都是我们自己设计制作的，而不是从网上找来的，虽然这样做效果体现出来会很慢，但是我们希望有一些真正认同我们，喜欢我们的读者。
关于您说的源代码的问题，很抱歉，由于CSS这组视频教程是由我们编写的，人民邮电出版社出版的《精通CSS DIV网页样式与布局》一书的附带内容，由于有出版合同约束，目前还不能提供自由下载。如果您有兴趣，可以购买这本书，现在各大书店，以及网上书店已经有销售了，书里面详细深入地分析了每一个案例，相信是很有价值的。
再次向您表示感谢！
我今年70岁了，看到你们的视频教材，学会很多知识，你们的视频教材太好了，通过你们的教材，我会作最简单的动画了，真诚谢谢你们！！！
支持！
老人家，您好啊！
我们真高兴有您这样的读者！我们还会继续努力制作更多更好的教材出来，方便广大朋友的学习！
顺便问一下您是在那里啊？我们目前在与出版社配合，编写一套带有视频讲座的为老年人学电脑的入门书籍，如果您有时间，帮我们看一看，提一提意见可以吗？谢谢！
这个教程不错.不过好像有的教程看不到.
比如:
用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课
fzying ，
您遇到的问题，应该偶然的网络故障，您再试试看，应该没有问题了！谢谢您喜欢我们的教程！