代码教程——第二十章 导航条（五）

现在来写导航项。其实导航是有专门的标签的 <nav> </nav> 但是这个特性比较新，IE9 才开始支持，所以很多人还是习惯用列表来写导航，这里我们也使用列表，为的是你以后看到各种代码都能看得懂，因为 nav 标签相对于列表还是比较简单的。

那么先来说说列表哦：

效果如下：

• 列表内容
• 列表内容
• 列表内容

如上叫做无序列表。

效果如下：

1. 列表内容
2. 列表内容
3. 列表内容

如上叫做有序列表。

你说这跟导航项一点都不像啊，但是在逻辑上还是很像的，都是列出来一些内容。既然我们对于前边的编号圆点什么的完全不在乎，那么我们就选择无序列表好了，那么 html 代码很简单的，几乎跟上面一样

这个样子没有问题，挺容易看懂的，我们把他加在 #loge 的 div 后面来看看效果。

你说，哼，幸亏我已经不再相信你了，否则又得失望。本来想要跟 logo 在一排的效果（要不那背景留着干嘛用？？）结果又做出来一个奇葩的造型。

我跟你说啊：想横排，加浮动！你看我一步步把它搞上去哦！在 CSS 里加上

就是给我们的每一个导航项加上了一个向左浮动的属性，我们只做了这一点，来看看什么变化哦

这个……好像是到一行了，但是有点乱，看不好效果，主要是那个圆点的影响，那我们去掉圆点，把刚才那部分 CSS 再加上一个属性：

就是列表的样式：无。再看效果。

呀，果然是一排相邻的元素，一加上浮动就从竖着排列变到横着排了。那么眼下呢，到这里你只要记住把想要横排的东西都加上浮动就好。如果你想知道为什么，那我们需要继续一下我们快递箱的故事，有些绕，这个故事晚些时候我会发布在我们交流平台的“咖啡俱乐部”频道内（就是我们的 VIP 频道）。

现在我们就先记住这个结论，然后再实践中去慢慢体验他的用途。然后我们做个练习，你看 logo 和导航项这两部分还是纵向排列的呢，那我们来给他俩也加上浮动试试看。

为了防止你搞乱了，我在这贴一下完整的 CSS 代码：

再来看看效果：

那么到了这里貌似虽然难看些，但是我们把位置都搞对了。下节课我们来试着给导航项加链接哦～～

 

本章代码下载