在實際開發(fā)中，移動Web頁面的設(shè)計風(fēng)格更接近App(手機(jī)應(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進(jìn)行案例演示。

【例2-5】

(1)創(chuàng)建C:\web\chapter02\demo05.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中，按鈕的默認(rèn)樣式已經(jīng)被取消。當(dāng)用戶單擊超鏈接時，不會顯示超鏈接的背景顏色。讀者可以嘗試移除特殊樣式，對比添加和移除后的區(qū)別。

本文來自千鋒教育，轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的列举在Web前端开发中经常会设置的特殊样式！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。