更新時間:2021-01-21 來源:黑馬程序員 瀏覽量:
在實際開發(fā)中,移動Web頁面的設(shè)計風(fēng)格更接近App(手機應(yīng)用),而不是傳統(tǒng)的網(wǎng)頁。為了有更好的用戶體驗,我們可以給移動Web頁面設(shè)置一些特殊樣式。下面為列舉在移動Web開發(fā)中經(jīng)常會設(shè)置的特殊樣式,具體如表1所示。
表1 移動端特殊樣式
需要注意的是,上述樣式是非標(biāo)準(zhǔn)的,因此加上了私有前綴“-webkit-”,該前綴在WebKit和Blink內(nèi)核的瀏覽器中有效,適用于Chrome瀏覽器和大多數(shù)移動端瀏覽器。
為了讓讀者更好地理解,下面我們通過例2-5進行案例演示。
【例2-5】
(1)創(chuàng)建C:\web\chapter02\demo05.html文件,具體代碼如下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>特殊樣式</title> <style> a { -webkit-tap-highlight-color: transparent; } input { -webkit-appearance: none; } </style> </head> <body> <a href="#">超鏈接</a> <input type="button" value="按鈕"> </body> </html>
上述代碼中,第8~10行代碼設(shè)置a標(biāo)簽樣式中的-webkit-tap-highlight-color的值為transparent,表示當(dāng)單擊這個超鏈接時,清除單擊高亮效果;第11~13行代碼設(shè)置按鈕樣式中的-webkit-appearance的值為none,用來去除按鈕的原生樣式。
(2)在瀏覽器中打開demo05.html,運行結(jié)果如圖1所示。
圖1 設(shè)置特殊樣式
在圖1中,按鈕的默認(rèn)樣式已經(jīng)被取消。當(dāng)用戶單擊超鏈接時,不會顯示超鏈接的背景顏色。讀者可以嘗試移除特殊樣式,對比添加和移除后的區(qū)別。
猜你喜歡: