列舉在移動Web開發中經常會設定的特殊樣式!
在實際開發中,移動Web頁面的設計風格更接近App(手機應用),而不是傳統的網頁。為了有更好的使用者體驗,我們可以給移動Web頁面設定一些特殊樣式。下面為列舉在移動Web開發中經常會設定的特殊樣式,具體如表1所示。
表1 移動端特殊樣式
需要注意的是,上述樣式是非標準的,因此加上了私有字首“-webkit-”,該字首在WebKit和Blink核心的瀏覽器中有效,適用於Chrome瀏覽器和大多數移動端瀏覽器。
為了讓讀者更好地理解,下面我們透過例2-5進行案例演示。
【例2-5】
(1)建立C:\web\chapter02\demo05.html檔案,具體程式碼如下。
上述程式碼中,第8~10行程式碼設定a標籤樣式中的-webkit-tap-highlight-color的值為transparent,表示當單擊這個超連結時,清除單擊高亮效果;第11~13行程式碼設定按鈕樣式中的-webkit-appearance的值為none,用來去除按鈕的原生樣式。
(2)在瀏覽器中開啟demo05.html,執行結果如圖1所示。
在圖1中,按鈕的預設樣式已經被取消。當使用者單擊超連結時,不會顯示超連結的背景顏色。讀者可以嘗試移除特殊樣式,對比新增和移除後的區別。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2770048/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 列舉在Web前端開發中經常會設定的特殊樣式!Web前端
- QTableWidget 設定列寬樣式QT
- Android開發之動態設定字型的樣式和粗細Android
- UIBarButtonSystemItem 列舉樣式檢視UIMIT
- 移動web——移動web開發簡介,WebStorgae簡介Web
- SQL 自定義函式 生成網路卡地址,MES開發中經常會用到的SQL函式
- web前端學習:CSS樣式設定技巧Web前端CSS
- EAS_WEB.設定控制元件樣式Web控制元件
- 移動 WEB 開發的佈局方式 ---- 響應式佈局Web
- Web Components 系列(八)—— 自定義元件的樣式設定Web元件
- 移動web開發總結Web
- 用列舉來驅動 TableView 開發View
- 移動端 web 開發的設計稿與工作流Web
- 好程式設計師web前端分享移動前端開發和web前端開發的區別程式設計師Web前端
- 移動web開發小貼示Web
- web移動開發總結(六)Web移動開發
- 列舉型別在JPA中的使用型別
- 移動端網站開發要點-meta設定網站
- Java enum列舉類詳解 列舉的常見用法Java
- 【Android】設定 LinearLayout 的樣式Android
- 前端成神之路-移動web開發之響應式佈局前端Web
- 介面和列舉在方法中的區別
- Spring 5 中函式式web開發中的swagger文件Spring函式WebSwagger
- 移動前端開發和Web前端開發的不同點介紹前端Web
- 來黑馬程式設計師從零學前端與移動開發----移動web開發----伸縮佈局程式設計師前端移動開發Web
- Go 100 mistakes 之如何正確設定列舉值中的零值Go
- qt中設定tab樣式為箭頭QT
- web移動端常問面試題Web面試題
- 開發響應式web頁面的經驗Web
- 共謀發展新機遇 中國移動遊戲行業開放合作大會在京舉行遊戲行業
- 移動APP開發框架盤點2:Web移動前端框架大全APP框架Web前端
- CSS設定連線<a>的樣式CSS
- canvas 設定線條的樣式Canvas
- win10工作列圖示在中間怎麼設定 win10工作列圖示在中間的設定方法Win10
- canvas 設定矩形樣式Canvas
- CSS 設定 <progress>樣式CSS
- CSS 設定列表樣式CSS
- CSS 設定文字樣式CSS