範例


[新手前端]選單共用背景圖片

現在的網頁設計比較重視語義化的結構,也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品,如果是「是內容」就使用 html的元素來表示,如果單純只是造型,就使用CSS 的元素背景來呈現。 所以目前比較流行的選單做法之就是將文字隱藏後用背景圖取代,雖然有一派是主張連字都不要藏,使用所謂的icon-font或是載入字型來美化,不過在英語系國家這麼做問題不太,一個字型檔不會有多大,中文就… 常用字至少要3000個,所以,實用性不高,我們中文使用者還是乖乖的用文字取代吧…淚目。 使用的方法很簡單,一般都是用無順序列表 ul 及例表項目 li 裡面放 錨點 a的方式來做選單 li 浮動後就能做出水平選單 a 設定 block就能採用寬度,設定背景,最後用 text-indent:-9999px 將文字推出可視區域