网页设计用CSS制作漂亮的菜单- CSS+DIV布局设计专题讲解 - 第6课

在线视频

在线下载

2. 无需表格的菜单

当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。

3. 菜单的横竖转换

导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过CSS属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如图所示。

4. 菜单实例一：百度导航条

打开搜索引擎百度的网站，可以看到logo下方的水平导航条。利用本课前面几节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的制作，模拟该效果。

5. 菜单实例二：流行的Tab菜单

Tab风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的Tab菜单，图中显示的就是一个Tab菜单。我们在这里通过对导航菜单CSS属性的进一步控制，实现Tab菜单的效果。

上一条： 网页div设计培训页面和浏览器的元素 - CSS+DIV网页布局专题 - 第5课
下一条： 网页设计CSS滤镜的应用 - CSS+DIV布局设计专题讲解 - 第7课