CSS网页布局入门教程9：用CSS设计网站导航——横向导航_基础教程
2020-11-27
来源：独旅网
横向导航 作为门户网站的设计而言，主导航一般采用横向导航。由于门户网站下方文字较多，且每个频道均有一同的样式区分，因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择，国内大部分门户均采用这种形式。
纵向导航 目前在门户网站的设计中已经不再流行，纵向导航更倾向于表达产品分类。
下拉导航 主要用于功能复杂的网站。在有些网站上也常见的。
总的来说导航的核心目标是设计一个简便快捷的操作入口，帮助用户快速到达网站中的相应内容，设计上应当根据网站类型及内容的需求设计合理的导航形式。这里我们将使用css对常用的三种导航形式进行设计，看看css是如何实现这些样式的。
横向导航
使用css布局的形式制作导航与table布局有很大的区别，网站除了页面布局之外，最重要的就是导航部分，在这一步应该先制作出一个简单明快的导航系统，然后一步一步的完成具有设计效果的最终导航。在这里我们先构想出了顶部的初级设计样式，导航为一种横向导航形式。在开始css的导航制作之前，先让我们回想一下传统的表格式而已的导航制作。如果表格式而已实现如图所示的导航形式，需要设计一个表格table。导航目前共有7个栏目组成，需要设计一个1行7列的表格，并在每一个单元标签中插入导航文字，然后 让每个单元格的文本居中,可以看一下实现代码：
通过代码可以看到，设定了表格的宽高，并把边框边距设为0以便于隐藏表格线，然后让第个单元格的文本对齐方式为居中，就实现了简单导航，这里的要点在于设计了一个与导航形式类似的数据表，将导航交往每一格数据中。再来看一下如何用css来设计同样的导航系统。
DIV+CSS布局的核心是实现了表现和内容的分离，先来认识一下内容部分的代码编写方式：