CSS网页布局入教程9：用CSS设计网站导航——横向导航.docVIP

CSS网页布局入门教程9：用CSS设计网站导航——横向导航 　网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等三种形式。　　横向导航　作为门户网站的设计而言，主导航一般采用横向导航。由于门户网站下方文字较多，且每个频道均有一同的样式区分，因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择，国内大部分门户均采用这种形式。　　纵向导航　目前在门户网站的设计中已经不再流行，纵向导航更倾向于表达产品分类。　　下拉导航　主要用于功能复杂的网站。在有些网站上也常见的。　　总的来说导航的核心目标是设计一个简便快捷的操作入口，帮助用户快速到达网站中的相应内容，设计上应当根据网站类型及内容的需求设计合理的导航形式。这里我们将使用css对常用的三种导航形式进行设计，看看css是如何实现这些样式的。　　横向导航　　使用css布局的形式制作导航与table布局有很大的区别，网站除了页面布局之外，最重要的就是导航部分，在这一步应该先制作出一个简单明快的导航系统，然后一步一步的完成具有设计效果的最终导航。在这里我们先构想出了顶部的初级设计样式，导航为一种横向导航形式。在开始css的导航制作之前，先让我们回想一下传统的表格式布局的导航制作。如果表格式布局实现如图所示的导航形式，需要设计