tmall前台（置顶导航页面学习）

1 最终效果图

图1 模仿天猫置顶导航栏目

2 页面布局分析

最外面是nav元素，nav元素和div元素一样都是用来进行布局的。 不同之处在于，nav可以更加明确的告诉搜索引擎，这部分内容，是用于导航的，帮助搜索引擎理解你的网页。
里面的布局直接使用span和a标签即可，因为这两个标签都是内联元素，所以不会换行。

3 纯html的书写

首先，需要引入JQuery和Bootstrap。使用这两个类库的原因是需要使用其中特定的字体图标和各种轮播的效果。
例如：使用了Bootstrap之后，超链会发生变化超链会变成浅蓝色。

然后span和a标签按需使用，完成设置超链接和引用Bootstrap的特效。即，如果是一个超链接，用a即可，若需要使用样式，则将即可。

最后右侧的两个图标需要使用向右飘逸定位，Bootstrap的pull-right样式，其实这个样式很简单，就是使用的float:right.。!important;表示高优先级。

4 样式讲解

这块对我来说，主要就是搞不清，用哪一个标签去控制那一块的样式更加合理。

1. 最外层的body是控制整个的字体的；
2. 的nav可以控制背景颜色和上下边距；
3. 因为span和a都是在nav中的，所以可以一起控制它们的颜色和相互的距离（0,10,0,10），左右都隔开10px即可。
4. 是设置a的三种不同状态的样式和将span引用的样式的颜色设置未天猫红即可。

5 再整合在一起

在将样式和html整合即可。这个页面在所以的页面中都是需要的，所以可以将其作为include页面使用。