用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课 书中实例
作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本课围绕菜单的制作，介绍相关的项目列表、菜单变幻、导航栏等的内容。[b]1. [/b][b]项目列表 [/b]
传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的 ol 标记，无顺序列表 ul 标记等等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了最初设计时它的功能。我们在这里主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进、位置等等。希望大家能够掌握以下几个方面的内容：
[list][*]列表的符号[*]图片符号[/list]
[b][img=230,227]http://learning.artech.cn/uploads/blog-images/css-01-images/image019.gif[/img]2. [/b][b]无需表格的菜单 [/b]
当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。
[align=left][b]3. [/b][b]菜单的横竖转换 [/b][/align]导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过CSS属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如图所示。
[align=left][b]4. [/b][b]菜单实例一：百度导航条 [/b][/align]打开搜索引擎百度的网站，可以看到logo下方的水平导航条。利用本课前面几节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的制作，模拟该效果。
[b][img=230,119]http://learning.artech.cn/uploads/blog-images/css-01-images/image025.gif[/img][/b]
[b]5. [/b][b]菜单实例二：流行的Tab[/b][b]菜单 [/b]
Tab风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的Tab菜单，图中显示的就是一个Tab菜单。我们在这里通过对导航菜单CSS属性的进一步控制，实现Tab菜单的效果。
**** Hidden Message ***** 我来支持,很好的视频,非常感谢... 感谢楼主为我们提供学习的好东西 感谢楼主为我们提供学习的好东西 下载无敌，无上感谢楼主！ 楼主有pdf版本不 这个一定要看看 我来支持,很好的视频 楼主,我有点词穷了,说不出什么了,只能说谢谢 在线培训方式很不错的 在线培训方式很不错的 我想回复。。。。 喜欢淡雅的风格的啊 慢慢學習，共同進步
页:
[1]