這是我模擬的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標簽
之后，我們給這個下拉框加了下拉的動畫，至於動畫這里不詳細說，只是說下為了寫這個動畫，特意去找了個小動畫框架，還有扯到了平穩退化的一些實踐。這里順便把小框架代碼貼上。
