選單（menu）是最基本最常見的網頁ui元素之一，它的主要功能包括：
引導使用者發現**的內容；
協助使用者執行某一特定的操作。
乙個完整的選單是一組選單項（menu item）的集合，所有的選單項在邏輯上應該是並列、平級的關係，它們指向相互之間沒有隸屬關係的內容或功能。
選單項可以是鏈結，也可以是另一組選單項的集合，即二級選單（sub-menu）。
選單項的文案設計
明了：把意思表達清楚是乙個選單項文案的最基本要求。
根據選單的兩種基本功能，「指向內容」的選單項最好是乙個概括內容的名詞或名詞性短語（如「詩歌」、「古典**」），「執行操作」的選單項最好是乙個動詞或動賓短語（如「訂閱」、「訂閱新聞」）。
基本的xhtml結構
在xhtml的一大堆標籤中，有乙個被99.99%的designer和99.98%的developer忽視的標籤：menu。它的用法與ul一樣，內部可以包含一系列的li元素來構成選單項，所以用它來構建選單是再合適不過的了。如下：
電影 **
軟體檢視效果（例1）
這裡需要特別說明一下，menu標籤在xhtml strict中已經不存在了，如果基於「向前相容」的考慮，建議使用ul來代替menu。如果你的doctype是xhtml transitional，那麼使用menu是完全沒問題的（包括通過校驗）。具體怎麼使用請根據你的實際情況選擇，在這篇文章中我將使用menu標籤。
選單項提示
設計選單項文案時，「簡短」與「明了」是一對矛盾，在無法用幾個字說得很明白的情況下，就需要「選單項提示（menu item tooltip）」了。當滑鼠懸停在某個選單項上的時候，會彈出相應的提示，對此選單項的內容和功能作出更進一步的說明。
xhtml中的title屬性就是用來提供這項改善可用性的功能：
檢視效果（例2）
最簡單的選單
到目前為止我們寫好了選單的xhtml**並考慮了可訪問性和易用性方面的問題，但這當然還稱不上乙個可以拿得出手的選單。不過也有人把這樣的選單拿出來用的，比如apache.org這個bt的技術組織@_@，下面咱就幫他們改個稍微好看點的選單。
先把menu的縮排效果和li前面的點去掉，並定義乙個合適的寬度：
menu
檢視效果（例3）
再為選單項設定盒模型風格，注意ie和firefox/opera之間在盒模型上的差異：
menu li
接下來是最關鍵的一步，請仔細看注釋。
menu a
檢視效果（例4）
menu a:link,menu a:visited
menu a:hover,menu a:active
檢視效果（例5）
也可以把滑鼠效果做得更明顯一些，比如變化一下背景色：
menu a:hover,menu a:active
檢視效果（例6）
橫向的選單
製作橫向選單的方法大致有兩種：浮動與絕對定位。
浮動法的思想很簡單：讓每乙個選單項都向左浮動，最終排成一橫排。我們只需對上面的css做一些小小的改動就可以了：
menu
menu li
檢視效果（例7）
這種方法不僅可以方便地建立橫向選單，它的思想同樣用於在「流動布局」中羅列一些相似的內容，是一種應用很廣泛的布局方法。
再講「絕對定位」的方法。很多人（包括一些web標準實踐經驗非常豐富的人）對絕對定位有一種莫名其妙的反感，i don't know why。事實上它是一種極其重要的css布局方法，只要在使用時掌握那麼一點點小竅門，你不會碰到讓人沮喪的布局錯亂或者其他什麼古怪的結果。當然我也不是說絕對定位是萬能的，「合適的才是最好的」，何時使用取決於具體的情況。
回到選單的製作上，如果你的選單項長短不一，或者高低起伏，總之是不那麼規則的時候，就可以使用絕對定位來實現。首先需要對上面的xhtml作一些小改動：給每個選單項乙個id：
id="mimovie">電影
id="mimusic">**
id="misoftware">軟體
三個選單項的id有乙個共同的字首——mi（即menu item的縮寫），用於和其他元素的id命名區分。這種命名方式純粹是我的個人喜好，來自於以前用delphi和vb開發軟體時的習慣。另外一些縮寫包括mnu（menu，選單）、btn（button，按鈕）、pnl（panel，面板）、lst（list，列表）、tab（tab menu，選項卡）等等。這樣做的好處是可以有效防止id命名重複，同時在css中也可以只看命名就知道元素的ui型別。
接下來就是css的工作了。先給menu定好長寬、去除縮排等等：
menu
接下來的一步很重要，給menu指定為相對定位：
menu
如果跳過了這一步，後面你會發現選單項的「絕對定位」並不是以menu為參照物，而是以瀏覽器視窗的左上角為座標原點，當然這不是我們想要的效果。
再設定選單項共同的屬性和相同的縱座標：
menu li
最後用id選擇單個的選單項指定其「個性」的橫座標屬性：
#mimovie
#mimusic
#misoftware
檢視效果（例8）
絕對定位對a標籤的定義與浮動法基本一致，請檢視例8的源**。
基於Web標準的UI元件 選單
選單 menu 是最基本最常見的網頁ui元素之一，它的主要功能包括 引導使用者發現 的內容 協助使用者執行某一特定的操作。乙個完整的選單是一組選單項 menu item 的集合，所有的選單項在邏輯上應該是並列 平級的關係，它們指向相互之間沒有隸屬關係的內容或功能。選單項可以是鏈結，也可以是另一組選單...
基於Vue搭建自己的元件庫（1）
專案參考文章 從零開始搭建vue元件庫 vv ui 專案的初衷是學習怎麼封裝乙個基於vue的ui元件庫，順便記錄每個步驟，以及在此過程中遇到的難點及體會。下面是我個人的乙個專案搭建流程，希望能幫助大家。使用 vue cli 3.0.0版本以上，在node或cmd中輸入以下命令建立專案 vue cre...
web標準 第1天 選擇什麼樣的DOCTYPE
第1天 選擇什麼樣的doctype 前言開始製作符合標準的站點，第一件事情就是宣告符合自己需要的doctype。檢視本站首頁原 可以看到第一行就是 開啟一些符合標準的站點，例如著名web設計軟體開發商macromedia 設計大師zeldman 的個人 會發現同樣的 而另一些符合標準的站點 例如k1...