網頁設計技術探討-選單共用背景圖片
現在的網頁設計比較重視語義化的結構，也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品，如果是「是內容」就使用 html的元素來表示，如果單純只是造型，就使用CSS 的元素背景來呈現。
所以目前比較流行的選單做法之就是將文字隱藏後用背景圖取代，雖然有一派是主張連字都不要藏，使用所謂的icon-font或是載入字型來美化，不過在英語系國家這麼做問題不太，一個字型檔不會有多大，中文就... 常用字至少要3000個，所以，實用性不高，我們中文使用者還是乖乖的用文字取代吧...淚目。
使用的方法很簡單，一般都是用無順序列表 ul 及例表項目 li 裡面放 錨點 a的方式來做選單。
li 浮動後就能做出水平選單。
a 設定 block就能採用寬度，設定背景，最後用 text-indent:-9999px 將文字推出可視區域。
一般都是共用一張背景，然後依不用樣式用 background-position來做位置的變化。
或是可以像這樣把他們當成圖示，字還是保留。
這個時候只要利用 text-indent:70px 空出圖片的位罝就行了。
但是要特別注意圖片的組成方式，有可能因為寬度而造成旁邊的圖示不小心跑出來。
所以在橫排的列表中，最好圖示都做直的往下排，在直排的場合做橫排的圖示。
再配合 background:repeat-x |repeat-y |no-repeat。
其實可以把圖示全部放成同一張圖片，依這兩種不同排法分好，最終只需要兩張就好。
當然還是要注意圖片的大小，不然反而會拖慢網速。
不過一般的情況下，少讀幾個檔頭的img是會比讀一張大張的來得快沒錯。
以上，就是簡單的選單製作報告~
轉貼來源：ITHome - chibc
參考文獻：
1.石恩綸（2000）。女性網路使用者的網站印象與網路使用行為。台北大學企業管例研究所碩士論文，未出版，台北。
2.江嘉瑜（2002）。台灣花卉電子商務網站內容之分析。中興大學行銷學研究所碩士論文，未出版，台中。
3.李俊宏（1995）。網頁設計原則的研究一以大專院校首頁設計為例。雲林技術學院程式設計研究所碩士論文，未出版，雲林。
相關文章
左右翻動的網頁設計方式，好像真的在看書呀！網頁設計用套裝 VS 客製殺手級的網頁設計該做或不做！Flash在微軟裡準備棄用，那在網頁設計的Flash還能繼續使用嗎？創業-從網頁設計做起!創業之路~
最新文章
HVACKer：入侵隔離網絡的新型攻擊技術還有什麼不會被入侵？路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌，最狂的是一家估值 124 億美的數據分析新創！【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala，下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了
