網頁設計技術探討-選單共用背景圖片
現在的網頁設計比較重視語義化的結構,也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品,如果是「是內容」就使用 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,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了