Yorkmusic.com简洁的横向导航。
使用CSS布局的形式制作导航与Table布局有很大的区别，网站除了页面布局之外，最重要的就是导航部分，在这一步应该先制作出一个简单明快的导航系统，然后一步一步的完成具有实际效果的最终导航。我们希望在有关CSS部分的讨论中以逐步细化的形式向大家展示CSS布局的方方面面，在这里我们先构想出了的顶部的初级设计样式，导航为一种横向导航形式。
在开始CSS导航制作之前，先让我们回想一下传统的表格式布局的导航制作。如果在表格式布局实现如图所示的导航形式，需要设计一个表格Table。导航目前共有9个频道组成，需要设计一个1行9列的表格，并在每一个单元格<td></td>标签中插入导航文字，然后让每个单元格的文本居中，可以看一下实现代码。
通过代码可以看到，设定了表格的宽度，并把边框设为0以便于隐藏表格线，然后让每个单元格中的文本对齐方式为居中，就实现了简单导航，这里的要点在于设计了一个与导航形式类似的数据表，将导航装入每一格数据中。再来看一下如何使用CSS来设计同样的导航系统，前面曾经谈到CSS布局能够帮助我们实现爱你表现与内容的分离，先来看认识一下内容部分的代码编写方式。钢板桩租赁，天津废锡回收
这段代码使用了一个新的元ulzai认识导航之前，先简要了解一下ul元素。天津网站建设，天津网站优化，汽车玻璃，天津二手装载机，商业策划招商
ul是CSS布局中使用得很广泛的一种元素，主要用来描述列表型内容，每一个<ul></ul>表示其中的内容为一个列表块，块中的每一条列表数据用<li></li>来描述，可以看一下不加任何样式的ul的实现显示效果。
如右图所示，作为一种列表型内容，ul默认样式就加上了圆点状序号，而且默认为从上到下排雷。为什么我们的导航系统要使用ul元素？实际上导航也是一种列表，可以理解为导航列表，每一个列表数据就是导航中的一个导航频道，同业也可以使用二层嵌套的div来实现一个导航的代码结构，但相对于ul列表来说，div显得过于复杂，ul的使用还是应当重点放在块状型区域，而对于简单的只有文字的导航来说，ul就更为轻巧灵活。
在代码中我们也为ul定义了一个id叫nav，接下来为这个ul及其下面的对象编写代码让它实现需要的导航效果。把第一段样式编写给了ul下的li对象，我们希望列表中的每一个列表不再遵循其默认的从上到下的排列，因此给#nav li指定了float：left的属性，如图div的float：left一样，也是通过浮动定位的原理，使得自身向左浮动，从而使下一个对象贴进该对象的右边，最终所有的li都具有了向左浮动的特性，从而形成了横向的排列形式。
导航的关键在于a链接对象的样式控制，在这里使用#nav li a{}给li下的每一个a链接对象编写了样式：
display:block是这里的重点，它使得a的链接对象的显示方式由一段文本改为一个块状对象，和div的特性相同，div默认状态下就是一个块状对象，而默认状态下a链接对象只是显示为一个普通文本，这样就没有办法使得a链接对象将能够像一个方块状按钮一样去运作，使用display：block的应用，我们让a标签元素有了宽度width：97px，高级height：22px，并在每一个a之间使用margin-left：2px；形成了左侧的外边距为2px。
display属性是CSS中对对象显示模式操作的一个属性，主要用于改变对象的显示方式，在CSS中，所有对象都有自己默认的显示方式，如a与span等对象，它们默认为一种行间内联对象，显示时它们不会影响其他任何对象的显示，如当应用span之后，span之后的内容会自动排在span的右边，像一段文本一样，而div这类对象的默认显示为块状对象，它们默认状态下便占据了一行的空间，并像一个方块一样显示在页面中，通过display：block，将a也变为了块状对象。此外，display还有众多使用方式将在后面的实例中逐步了解到。
预览一下效果，已经像个导航的模样了，不过鼠标移上时上还是没有任何响应，一个导航如果让用户鼠标移上没有人呢和交互式响应，对于用户来说是迷惑的，交互式的导航能够告诉用户哪里能点击，当前在哪里，以及哪里已经看过了，现在的趋势是，用户鼠标移上导航上的某一个频道时，最好能通过一些带有交互反馈的操作来提示用户对象是可以点击的，因此我们继续增加代码来实现交互式导航：
预览效果，用鼠标移上一个频道，响应出现了，当前鼠标所在的导航变成深灰底白色，这样我们的导航已经变得友好多了，按钮区域也似乎变得非常灵活。
通过简单对比不难发现，实现同样的代码，CSS的优势相当明显，如果作为一个大型的门户或电子商务网站，同样的导航系统更是要重复出现数十次至数千次，重复使用的数量相当巨大，使用CSS布局来控制导航所能带来的改观相当明显。
了解完了简单的导航构造，有必要再为导航增加更多的设计丰富导航的设计及可用性。
回顾一下Amazon.com的导航，我们发现他的导航采用了一种类似文件夹标签的样式，这种样式目前在网站上很常见，除了美观之外，也能够让用户非常方便的指导自己所处在哪一个频道。