選單（menu）是最基本最常見的網頁ui元素之一，它的主要功能包括：
引導使用者發現**的內容；
協助使用者執行某一特定的操作。
乙個完整的選單是一組選單項（menu item）的集合，所有的選單項在邏輯上應該是並列、平級的關係，它們指向相互之間沒有隸屬關係的內容或功能。
選單項可以是鏈結，也可以是另一組選單項的集合，即二級選單（sub-menu）。
選單項的文案設計
明了：把意思表達清楚是乙個選單項文案的最基本要求。
根據選單的兩種基本功能，「指向內容」的選單項最好是乙個概括內容的名詞或名詞性短語（如「詩歌」、「古典**」），「執行操作」的選單項最好是乙個動詞或動賓短語（如「訂閱」、「訂閱新聞」）。
基本的xhtml結構
在xhtml的一大堆標籤中，有乙個被99.99%的designer和99.98%的developer忽視的標籤：menu。它的用法與ul一樣，內部可以包含一系列的li元素來構成選單項，所以用它來構建選單是再合適不過的了。如下：
電影
** 軟體
可能大多數人會用（或已經用了）ul來構建自己的選單xhtml**，這樣也不錯，但是現在你知道了有乙個標籤叫menu，趕快改過來吧（原裝的好呀^_^）。
選單項提示
設計選單項文案時，「簡短」與「明了」是一對矛盾，在無法用幾個字說得很明白的情況下，就需要「選單項提示（menu item tooltip）」了。當滑鼠懸停在某個選單項上的時候，會彈出相應的提示，對此選單項的內容和功能作出更進一步的說明。
xhtml中的title屬性就是用來提供這項改善可用性的功能：
檢視效果（例2）
最簡單的選單
到目前為止我們寫好了選單的xhtml**並考慮了可訪問性和易用性方面的問題，但這當然還稱不上乙個可以拿得出手的選單。不過也有人把這樣的選單拿出來用的，比如apache.org
這個bt的技術組織@_@，下面咱就幫他們改個稍微好看點的選單。
先把menu的縮排效果和li前面的點去掉，並定義乙個合適的寬度：
menu再為選單項設定盒模型風格，注意ie和firefox/opera之間在盒模型上的差異：
menu limenu amenu a:link,menu a:visited
menu a:hover,menu a:active
也可以把滑鼠效果做得更明顯一些，比如變化一下背景色：
menu a:hover,menu a:active橫向的選單
製作橫向選單的方法大致有兩種：浮動與絕對定位。
浮動法的思想很簡單：讓每乙個選單項都向左浮動，最終排成一橫排。我們只需對上面的css做一些小小的改動就可以了：
menu
menu li
這種方法不僅可以方便地建立橫向選單，它的思想同樣用於在「流動布局」中羅列一些相似的內容，是一種應用很廣泛的布局方法。
再講「絕對定位」的方法。很多人（包括一些web標準實踐經驗非常豐富的人）對絕對定位有一種莫名其妙的反感，i don't know why。事實上它是一種極其重要的css布局方法，只要在使用時掌握那麼一點點小竅門，你不會碰到讓人沮喪的布局錯亂或者其他什麼古怪的結果。當然我也不是說絕對定位是萬能的，「合適的才是最好的」，何時使用取決於具體的情況。
回到選單的製作上，如果你的選單項長短不一，或者高低起伏，總之是不那麼規則的時候，就可以使用絕對定位來實現。首先需要對上面的xhtml作一些小改動：給每個選單項乙個id：
電影
**軟體
id命名重複，同時在css中也可以只看命名就知道元素的ui型別。
接下來就是css的工作了。先給menu定好長寬、去除縮排等等：
menumenu指定為相對定位：
menumenu為參照物，而是以瀏覽器視窗的左上角為座標原點，當然這不是我們想要的效果。
再設定選單項共同的屬性和相同的縱座標：
menu liid選擇單個的選單項指定其「個性」的橫座標屬性：
#mimovie
#mimusic
#misoftware
絕對定位對a標籤的定義與浮動法基本一致，請檢視例8的源**。
基於Web標準的UI元件 選單 1
選單 menu 是最基本最常見的網頁ui元素之一，它的主要功能包括 引導使用者發現 的內容 協助使用者執行某一特定的操作。乙個完整的選單是一組選單項 menu item 的集合，所有的選單項在邏輯上應該是並列 平級的關係，它們指向相互之間沒有隸屬關係的內容或功能。選單項可以是鏈結，也可以是另一組選單...
UI元件和容器元件的拆分
1.首先，以前面的todolist為例 以下是原來的todolist中的render函式中的內容，我們可以將元件中關於ui渲染頁面的封裝到乙個檔案中 render 2.在src目錄下新建乙個檔名為todolistui.js。將剛剛的render中的內容複製到todolistui裡面。3 這裡需要進一...
基於vue的UI框架
1 餓了麼 vue 2.0後台ui框架 2 iview元件庫 iview 主要服務於 pc 介面的中後台業務，很優秀的元件庫，可惜不適合移動端 4 mint ui 餓了麼移動端元件庫 由餓了麼前端團隊推出的 mint ui 是乙個基於 vue.js 的移動端元件庫 5 vue admin 管理面板u...