这是我模拟的header顶部导航条。这里用到了Font-Awesome字体图标，用法很简单，只需要下载好资源，然后在我们的站点引入min.css就可以了，至于具体用法就是查到你想使用的图标名称，放在i标签的class中便可。
这个是之前写的关于字体图标的总结，也一起放上来
说完字体图标说回我们正事，顶部导航条
总结一下写法，最外层标签是header，其中header定高了，47px，同时也设了line-height也是47px，为了是字体垂直居中。
然后里面分别包含四个div
这里主要注意下float:right的第三四个div，float的排列顺序是按照我们写的div的顺序进行排列的，也即是写在最前面的float:right的div越往右边靠，所以float在最右边的那个div，即离开的那个，我们要写在user之前，只有这样才能使得离开放在最右边。
接下来就说说a标签的具体实现。就拿home也即是第一个div来说。html结构如下
结构很简单，我们的样式设置的话基本都是放在a标签里面，外层div除了浮动以及简单的定位没有了其他样式，注意外层div设了float之后，宽度不再是100%，而是由内容撑起来或者是自己手动设置宽度。
可以看到，我们显示把a标签的display设为了block，只有这样我们的a标签才能把图标以及文字上下的位置也包括在内。之后设了padding左右为10px，很明显这样设置之后我们的a标签大小就可以根据文字自动撑起来了。此时已经基本设定完毕，再加个hover改变背景色就完成了。但是有时候我们想每个a标签都有一段距离隔开，这时候可以给个margin-left。
接上昨晚的内容，今天写了这个玩意
原网页效果还有一个三角形，以及动画效果下拉（动画效果到时候打算用三种方式写，原生js，库velocity以及css3动画）。此处先省略这些知识做了这个简单demo。
从内容上来说是很简单的，也确实，而这次我写的很慢，主要原因是我原本的a标签上写了很多属性，所以到了这里写的时候那些a标签的默认属性干扰了我的判断导致写的速度变慢，以后注意下这点。
开始分析下代码
首先做的最重要一件事是用一个ul标签把这些内容都括起来，然后做好定位工作，观察上面的效果发现这个下拉框一直都是跟超级管理员这个div的右边框平排的，所以很明显此处我们的定位就是给ul和超级管理员div的父级div，也即是user这个div设position为relative，然后给我们的ul设一个absolute并且right:0便可完成这一步的定位工作。这里也要注意一个事情，那就是我们并没有设top值，如果我们给了absolute绝对定位的话，如果left或者top没有赋值，那么该值按照原本默认的位置排放，所以此处我们虽然没设top值，但是它的位置默认是在超级管理员下面排列。设置完了这些之后我们可不要忽略了我们盒子的边框也是在这里设的，以及我最怕的阴影（听说box-shadow很耗性能不知道真假，有时间查一下）
之后就是ul的每个元素的样式设置了，ul下面的结构是这样的
所以呢，我们需要做的大多数设置都是在a标签上的，而不是li标签。为了达到上面的效果，我们需要的样式分别是这些
字体大小，字体垂直居中，字体颜色，点击背景颜色
很明显这样设置完了之后还远远不够，还要给a标签整一下它的位置，所以我们肯定要给一个padding-left移动下位置让a标签的icon还有文字都往中间一点靠过去，不然都挤在了左边线上了，然后之前的css样式中给a标签设了一个默认的margin，很明显这里的a标签肯定是要不得margin的，一旦设了，那么点击的时候左边就会出问题，上图最容易理解
所以此处要把margin清空，然后呢当然还有最重要也是一开始就应该设定的，那就是display了。
、
接着上面的下拉框，这次我们又加了一个新的细节，那便是小三角形
由于之前忘了三角形的写法所以又去普及了一下，其中这里的这个三角形跟我们往常的三角形不同，平常我们写的可能是这种
而这次我们写的却是带边框的，对于这种带边框的三角形，其实写起来也不难，用的是一种障眼法，
看到了吗，这个所谓的边框是由两个三角形组成的，也即是最外层的是白色的三角形并且小一点，而底层的是边框色的大的三角形，就这样这个小的三角形叠在大的上面，形成了三角形边框。
具体的代码实现我是仿照网页，用:before以及:after伪类写的。
它们的定位节点是ul标签
之后，我们给这个下拉框加了下拉的动画，至于动画这里不详细说，只是说下为了写这个动画，特意去找了个小动画框架，还有扯到了平稳退化的一些实践。这里顺便把小框架代码贴上。
