视频：第5课 - 用CSS制作漂亮的菜单- CSS/DIV布局专题讲解
作者:曾顺 来源:前沿视频教室 【大 中 小】 浏览: 添加日期：2008-06-26 我要评论(7)
下载该节视频教程 动力软件园分流下载 FLV播放器下载 或者使用QQ影音播放
作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本课围绕菜单的制作，介绍相关的项目列表、菜单变幻、导航栏等的内容。
1. 项目列表
传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的 ol 标记，无顺序列表 ul 标记等等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了最初设计时它的功能。我们在这里主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进、位置等等。希望大家能够掌握以下几个方面的内容：
- 列表的符号
- 图片符号
2. 无需表格的菜单
当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。
3. 菜单的横竖转换
导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过CSS属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如图所示。
4. 菜单实例一：百度导航条
打开搜索引擎百度的网站，可以看到logo下方的水平导航条。利用本课前面几节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的制作，模拟该效果。
5. 菜单实例二：流行的Tab菜单
Tab风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的Tab菜单，图中显示的就是一个Tab菜单。我们在这里通过对导航菜单CSS属性的进一步控制，实现Tab菜单的效果。
（如果您觉得本站不错，请告诉身边的朋友，或转载到论坛、百度知道、贴吧等，记得带网址哟，不胜感激！）
〖DIV+CSS教程〗Tags: 视频 css菜单 css竖向导航
所属专题：视频教程
相关文章
更多评论(7)..会员评论
- wshihutaoaa(60.182.*.*) 发表于：2011-08-14 23:29:22
- 想看TAB菜单的源代码，自己解决不了标签a与标签ul的下边框进行重叠 所以a边框不能对ul的下边框进行覆盖 求解。。。。
- 463727277(221.182.*.*) 发表于：2010-05-05 14:37:07
- 我是学设计的，以前一直用表格，一直以来都是所谓的潜水者。现在开始系统的学div,看了这么多的网站，这个网站做的是最好的，很无私啊，网站好，管理员大哥更好（呵呵，听视频里的声音岁数不是很大哈），里面的问题解答的都很详实，我学到了不少东西，在这里先谢过了。希望网站越办越好。
- 管理员回复：谢谢
- lavinia121(121.76.*.*) 发表于：2010-02-21 21:24:22
- 很想学做这种tab菜单，但是总是做不好，导航和下面的部分中间总是有1像素的距离，怎么都弄不掉呢。。。
- 管理员回复：得看源代码
- 剡烛泪(123.232.*.*) 发表于：2010-01-30 17:21:34
- 谢谢管理员，真的学到了不少东西
- 管理员回复：常来哟
- Gary(119.125.*.*) 发表于：2009-11-13 10:37:10
- #navigation{font-family:Arial;width:20%} 加了个width 就跟你的垂直菜单一模一样了...但是加了#navigation{float:left} 水平菜单跟你的就不一样...其他代码都一样了..是不是还要设置什么
- D.PenG(58.210.*.*) 发表于：2009-09-16 14:20:22
- 好东西，正有此需要
- 管理员回复：^_^
- 爱好者(124.200.*.*) 发表于：2009-09-09 18:50:41
- 这个视频怎么看不了````
- 管理员回复：可以看的呀
推荐文章
热门文章
最新图片素材
最新评论文章
推荐专题
在线交流QQ群
- 106310407(开)
- 55427134(开)
- 2993401(开)
- 30235673(开)
- 33424604(开)
- 2993401(开)
- 161512108(开)
- 161510519(开)
- 158375021(开)
- 155858414(开)
- 143309878(开)
- 16373807(开)
- 129098721(开)
- 123473199(开)
- 146991009(开)
- 135792800(开)